From 003ac898617a030de32b71e9fe96b29a7416fec1 Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Mon, 20 May 2024 18:47:12 +0100
Subject: [PATCH 1/8] feat: add modal store

---
 frontend/stores/modals.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 frontend/stores/modals.ts

diff --git a/frontend/stores/modals.ts b/frontend/stores/modals.ts
new file mode 100644
index 000000000..d47fe7f22
--- /dev/null
+++ b/frontend/stores/modals.ts
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+interface Modal {
+  isOpen: boolean;
+}
+
+export const useModals = defineStore("modals", {
+  state: () => ({
+    modals: {} as Record<string, Modal>,
+  }),
+
+  actions: {
+    openModal(modalName: string) {
+      const modals = this.modals;
+      for (const key in modals) {
+        modals[key].isOpen = false;
+      }
+      modals[modalName] = { isOpen: true };
+    },
+
+    closeModal(modalName: string) {
+      if (this.modals[modalName]) {
+        this.modals[modalName].isOpen = false;
+      }
+    },
+  },
+});

From 3f8bde9bc3d53c9386a089e0afaa484f182eb0b4 Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Mon, 20 May 2024 18:47:51 +0100
Subject: [PATCH 2/8] feat: refactor to use modal store

---
 frontend/pages/docs/get-active.vue                      | 8 ++++++--
 frontend/pages/docs/get-organized.vue                   | 8 ++++++--
 frontend/pages/docs/grow-organization.vue               | 8 ++++++--
 frontend/pages/events/[id]/about.vue                    | 8 ++++++--
 frontend/pages/organizations/[id]/about.vue             | 9 ++++++---
 frontend/pages/organizations/[id]/groups/[id]/about.vue | 8 ++++++--
 6 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/pages/docs/get-active.vue b/frontend/pages/docs/get-active.vue
index a59634582..590c30414 100644
--- a/frontend/pages/docs/get-active.vue
+++ b/frontend/pages/docs/get-active.vue
@@ -130,13 +130,17 @@
 </template>
 
 <script setup lang="ts">
+const modals = useModals();
+const modalName = "ModalImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/docs/get-organized.vue b/frontend/pages/docs/get-organized.vue
index 32b54ec0d..fefc382a3 100644
--- a/frontend/pages/docs/get-organized.vue
+++ b/frontend/pages/docs/get-organized.vue
@@ -103,13 +103,17 @@
 </template>
 
 <script setup lang="ts">
+const modals = useModals();
+const modalName = "ModalImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/docs/grow-organization.vue b/frontend/pages/docs/grow-organization.vue
index d982a875e..396349e1c 100644
--- a/frontend/pages/docs/grow-organization.vue
+++ b/frontend/pages/docs/grow-organization.vue
@@ -110,13 +110,17 @@
 </template>
 
 <script setup lang="ts">
+const modals = useModals();
+const modalName = "ModalImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index cb8ecb67a..66f714a4f 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -139,13 +139,17 @@ onMounted(() => {
   handleResize(); // initial check
 });
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index 5a4426633..cdd62f3f2 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -202,14 +202,17 @@ const testDiscussionInput: DiscussionInput = {
 //   upVotes: 6,
 //   downVotes: 4,
 // });
-
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
index 52e1296b3..91bcb9daa 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -125,13 +125,17 @@ onMounted(() => {
   updateShareBtnLabel();
 });
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>

From 30e2633a33f752e942ac8ea7ae0d855f63775ade Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Mon, 20 May 2024 18:47:56 +0100
Subject: [PATCH 3/8] feat: refactor to use modal store

---
 frontend/app.vue                              | 10 ++++++---
 frontend/components/card/CardAbout.vue        |  9 +++++---
 frontend/components/card/CardDetails.vue      |  8 +++++--
 frontend/components/card/CardGetInvolved.vue  |  8 +++++--
 .../icon/IconOrganizationStatus.vue           |  9 +++++---
 .../image-carousel/MediaImageCarousel.vue     |  9 +++++---
 .../image-carousel/MediaImageCarouselFull.vue |  8 +++++--
 frontend/components/modal/ModalBase.vue       | 21 +++++++++---------
 .../components/modal/ModalCommandPalette.vue  | 22 +++++++++++--------
 .../components/modal/ModalEditPageText.vue    | 17 ++++++++------
 .../modal/ModalMediaImageCarousel.vue         | 17 ++++++++------
 .../modal/ModalOrganizationStatus.vue         | 17 ++++++++------
 frontend/components/modal/ModalSharePage.vue  | 18 +++++++--------
 .../components/modal/image/ModalImage.vue     | 17 ++++++++------
 .../components/modal/qr-code/ModalQRCode.vue  | 14 +++++-------
 .../modal/qr-code/ModalQRCodeBtn.vue          |  8 +++++--
 .../modal/upload-images/ModalUploadImages.vue | 13 +++++------
 .../sidebar/left/SidebarLeftIndex.vue         |  9 +++++---
 .../TooltipMenuSearchResultEvent.vue          |  8 +++++--
 .../TooltipMenuSearchResultGroup.vue          |  8 +++++--
 .../TooltipMenuSearchResultOrganization.vue   |  8 +++++--
 .../TooltipMenuSearchResultResource.vue       |  8 +++++--
 .../TooltipMenuSearchResultUser.vue           |  8 +++++--
 23 files changed, 168 insertions(+), 106 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index 765340146..bd91bc4cd 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -14,6 +14,7 @@
       <ModalCommandPalette
         @closeModal="handleCloseModal"
         :isOpen="modalIsOpen"
+        :modalName="modalName"
       />
       <NuxtPage />
     </NuxtLayout>
@@ -28,15 +29,18 @@ useHead({
     return titleChunk ? `${titleChunk} • activist` : "activist";
   },
 });
-
+const modals = useModals();
+const modalName = "generalModal";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 
 const { isMacOS } = useDevice();
diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
index f572d9041..f61fff4d6 100644
--- a/frontend/components/card/CardAbout.vue
+++ b/frontend/components/card/CardAbout.vue
@@ -242,14 +242,17 @@ const expandText = ref(false);
 function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
-
+const modals = useModals();
+const modalName = "ModalEditPageText";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index d0784750d..c442395cc 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -59,13 +59,17 @@ const { descriptionText } = useDescriptionText(props);
 const { getInvolvedText } = useGetInvolvedText(props);
 const { getInvolvedURL } = useGetInvolvedURL(props);
 
+const modals = useModals();
+const modalName = "ModalEditPageText";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/CardGetInvolved.vue b/frontend/components/card/CardGetInvolved.vue
index 831e3f32f..bc530da7a 100644
--- a/frontend/components/card/CardGetInvolved.vue
+++ b/frontend/components/card/CardGetInvolved.vue
@@ -157,13 +157,17 @@ const { getInvolvedURL } = useGetInvolvedURL(props);
 
 const { id } = useRoute().params;
 
+const modals = useModals();
+const modalName = "ModalEditPageText";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/icon/IconOrganizationStatus.vue b/frontend/components/icon/IconOrganizationStatus.vue
index f4545c52a..74123e418 100644
--- a/frontend/components/icon/IconOrganizationStatus.vue
+++ b/frontend/components/icon/IconOrganizationStatus.vue
@@ -74,14 +74,17 @@ defineProps<{
   status: number;
   organization: Organization;
 }>();
-
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/media/image-carousel/MediaImageCarousel.vue b/frontend/components/media/image-carousel/MediaImageCarousel.vue
index f96f997ff..7b529d320 100644
--- a/frontend/components/media/image-carousel/MediaImageCarousel.vue
+++ b/frontend/components/media/image-carousel/MediaImageCarousel.vue
@@ -50,15 +50,18 @@ const imageUrls = [
   `/images/content_pages/art/get_organized_${imageColor}.png`,
   `/images/content_pages/art/grow_organization_${imageColor}.png`,
 ];
-
+const modals = useModals();
+const modalName = "ModalUploadImages";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
 
diff --git a/frontend/components/media/image-carousel/MediaImageCarouselFull.vue b/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
index 0eda91177..f26b890f5 100644
--- a/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
+++ b/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
@@ -16,13 +16,17 @@
 </template>
 
 <script setup lang="ts">
+const modals = useModals();
+const modalName = "ModalMediaImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/modal/ModalBase.vue b/frontend/components/modal/ModalBase.vue
index 56dcd2d9c..e625c6a2c 100644
--- a/frontend/components/modal/ModalBase.vue
+++ b/frontend/components/modal/ModalBase.vue
@@ -1,9 +1,5 @@
 <template>
-  <Dialog
-    @close="closeModal()"
-    class="relative z-50"
-    :open="modalShouldClose == false ? modalIsOpen : false"
-  >
+  <Dialog @close="closeModal()" class="relative z-50" :open="modalIsOpen">
     <div
       @click="closeModal()"
       class="fixed inset-0 cursor-pointer bg-light-layer-0/95 dark:bg-dark-layer-0/95"
@@ -65,15 +61,18 @@ import { Dialog, DialogPanel } from "@headlessui/vue";
 const props = defineProps<{
   isOpen: boolean;
   imageModal?: boolean;
+  modalName: string;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = props.modalName;
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const closeModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalCommandPalette.vue b/frontend/components/modal/ModalCommandPalette.vue
index 67af2ad65..8c52dd60f 100644
--- a/frontend/components/modal/ModalCommandPalette.vue
+++ b/frontend/components/modal/ModalCommandPalette.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div
       class="focus-inside elem-shadow-sm my-2.5 flex w-[90%] grow select-none items-center justify-between rounded-md bg-light-layer-2 px-2 py-1 text-left text-light-distinct-text transition duration-200 dark:bg-dark-layer-2 dark:text-dark-distinct-text"
@@ -174,17 +175,20 @@
 <script setup lang="ts">
 const props = defineProps<{
   isOpen: boolean;
+  modalName: string;
 }>();
 
 const localePath = useLocalePath();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = props.modalName;
+let modalIsOpen = computed(() => props.isOpen);
 
-const emit = defineEmits(["closeModal"]);
-const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
-};
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
+
+function handleCloseModal() {
+  modals.closeModal(modalName);
+}
 </script>
diff --git a/frontend/components/modal/ModalEditPageText.vue b/frontend/components/modal/ModalEditPageText.vue
index ffba96c19..744b1c01c 100644
--- a/frontend/components/modal/ModalEditPageText.vue
+++ b/frontend/components/modal/ModalEditPageText.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="flex flex-col space-y-7">
       <div
@@ -67,13 +68,15 @@ const translatedTexts = computed(() => {
   });
 });
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalEditPageText";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalMediaImageCarousel.vue b/frontend/components/modal/ModalMediaImageCarousel.vue
index 24df87ebb..371c2bfa4 100644
--- a/frontend/components/modal/ModalMediaImageCarousel.vue
+++ b/frontend/components/modal/ModalMediaImageCarousel.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <MediaImageCarousel :fullscreen="true" />
   </ModalBase>
@@ -12,13 +13,15 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalMediaImage";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalOrganizationStatus.vue b/frontend/components/modal/ModalOrganizationStatus.vue
index 6a700aa12..2a94a4cb9 100644
--- a/frontend/components/modal/ModalOrganizationStatus.vue
+++ b/frontend/components/modal/ModalOrganizationStatus.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="max-h-[80vh] px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
@@ -40,14 +41,16 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const modalOrganizationStatusData = inject<{
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 26bd41548..ef09dfe52 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,8 +1,5 @@
 <template>
-  <ModalBase
-    @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
-  >
+  <ModalBase @closeModal="handleCloseModal" :isOpen="modalIsOpen" :modalName="modalName">
     <div class="px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
         <p class="responsive-h2 font-bold">
@@ -206,15 +203,16 @@ const props = defineProps<{
   user?: User;
   isOpen: boolean;
 }>();
+const modals = useModals();
+const modalName = "ModalSharePage";
+let modalIsOpen = computed(() => props.isOpen);
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const getEntityType = () => {
diff --git a/frontend/components/modal/image/ModalImage.vue b/frontend/components/modal/image/ModalImage.vue
index 4e07466cb..cf7f1f2e9 100644
--- a/frontend/components/modal/image/ModalImage.vue
+++ b/frontend/components/modal/image/ModalImage.vue
@@ -1,8 +1,9 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
     :imageModal="true"
+    :modalName="modalName"
   >
     <img
       v-if="$colorMode.value == 'light'"
@@ -26,13 +27,15 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalImage";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/qr-code/ModalQRCode.vue b/frontend/components/modal/qr-code/ModalQRCode.vue
index 001360c39..eafafc11a 100644
--- a/frontend/components/modal/qr-code/ModalQRCode.vue
+++ b/frontend/components/modal/qr-code/ModalQRCode.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <DialogTitle class="flex justify-between font-display">
       <p class="md:responsive-h2 text-3xl font-bold">
@@ -118,15 +119,12 @@ const props = defineProps<{
 }>();
 
 const { linkURL } = useLinkURL(props);
+const modals = useModals();
+const modalName = "ModalsQRCode";
+const modalIsOpen = computed(() => modals.modals[modalName]?.isOpen ?? false);
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
-
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const qrcode = ref();
diff --git a/frontend/components/modal/qr-code/ModalQRCodeBtn.vue b/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
index c33b552df..fa4636d72 100644
--- a/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
+++ b/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
@@ -79,13 +79,17 @@ defineProps<{
   type: "icon" | "meta-tag";
 }>();
 
+const modals = useModals();
+const modalName = "ModalsQRCode";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/modal/upload-images/ModalUploadImages.vue b/frontend/components/modal/upload-images/ModalUploadImages.vue
index 8c8b4ecba..6c249ee42 100644
--- a/frontend/components/modal/upload-images/ModalUploadImages.vue
+++ b/frontend/components/modal/upload-images/ModalUploadImages.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div>
       <DialogTitle>
@@ -102,13 +103,11 @@ const props = withDefaults(defineProps<Props>(), {
   uploadLimit: 10,
 });
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalUploadImages";
+const modalIsOpen = computed(() => modals.modals[modalName]?.isOpen ?? false);
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/sidebar/left/SidebarLeftIndex.vue b/frontend/components/sidebar/left/SidebarLeftIndex.vue
index b9232a8c7..a67165ad0 100644
--- a/frontend/components/sidebar/left/SidebarLeftIndex.vue
+++ b/frontend/components/sidebar/left/SidebarLeftIndex.vue
@@ -103,14 +103,17 @@ defineProps<{
 
 const sidebar = useSidebar();
 const menuEntriesState = useMenuEntriesState();
-
+const modals = useModals();
+const modalName = "ModalUploadImages";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
index b7e99f327..c0d793c2b 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
@@ -49,13 +49,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
index f90310a15..b87dd257d 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
@@ -54,13 +54,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
index 091756974..3ccc2f862 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
@@ -54,13 +54,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
index 24e805535..8df4dbebc 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
@@ -41,13 +41,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
index 3586f6a65..03151e655 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
@@ -41,13 +41,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>

From 2d77b152e5f5bb7ebfcf9c33effd737c4d199ce2 Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Mon, 20 May 2024 19:26:04 +0100
Subject: [PATCH 4/8] style: update to match prettier styling

---
 frontend/components/modal/ModalSharePage.vue            | 6 +++++-
 frontend/pages/organizations/[id]/groups/[id]/about.vue | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index e9c61076e..9bd7e138d 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,5 +1,9 @@
 <template>
-  <ModalBase @closeModal="handleCloseModal" :isOpen="modalIsOpen" :modalName="modalName">
+  <ModalBase
+    @closeModal="handleCloseModal"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
+  >
     <div class="px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
         <p class="responsive-h2 font-bold">
diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
index 3db508f8b..809cc4b0a 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -115,7 +115,6 @@ onMounted(() => {
   updateShareBtnLabel();
 });
 
-
 onUpdated(() => {
   updateShareBtnLabel();
 });

From 2aaaa525ab7393d95538af5174c15edc16119047 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Mon, 1 Jul 2024 00:25:05 +0200
Subject: [PATCH 5/8] #854 reorder files as a step towards fixing merge
 conflicts

---
 frontend/components/card/about/CardAbout.vue  |   7 +
 .../components/card/about/CardAboutEvent.vue  | 109 ++++++++++++++
 .../components/card/about/CardAboutGroup.vue  | 135 ++++++++++++++++++
 .../card/about/CardAboutOrganization.vue      | 134 +++++++++++++++++
 .../card/get-involved/CardGetInvolved.vue     |   7 +
 .../get-involved/CardGetInvolvedEvent.vue     |  68 +++++++++
 .../get-involved/CardGetInvolvedGroup.vue     |  67 +++++++++
 .../CardGetInvolvedOrganization.vue           |  88 ++++++++++++
 .../ModalCommandPalette.vue                   |   0
 .../ModalEditFaqEntry.vue}                    |   5 +-
 .../modal/edit/about/ModalEditAboutEvent.vue  |  93 ++++++++++++
 .../modal/edit/about/ModalEditAboutGroup.vue  |  93 ++++++++++++
 .../edit/about/ModalEditAboutOrganization.vue | 102 +++++++++++++
 13 files changed, 907 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/card/about/CardAbout.vue
 create mode 100644 frontend/components/card/about/CardAboutEvent.vue
 create mode 100644 frontend/components/card/about/CardAboutGroup.vue
 create mode 100644 frontend/components/card/about/CardAboutOrganization.vue
 create mode 100644 frontend/components/card/get-involved/CardGetInvolved.vue
 create mode 100644 frontend/components/card/get-involved/CardGetInvolvedEvent.vue
 create mode 100644 frontend/components/card/get-involved/CardGetInvolvedGroup.vue
 create mode 100644 frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
 rename frontend/components/modal/{ => command-palette}/ModalCommandPalette.vue (100%)
 rename frontend/components/modal/{ModalEditPageText.vue => edit/ModalEditFaqEntry.vue} (95%)
 create mode 100644 frontend/components/modal/edit/about/ModalEditAboutEvent.vue
 create mode 100644 frontend/components/modal/edit/about/ModalEditAboutGroup.vue
 create mode 100644 frontend/components/modal/edit/about/ModalEditAboutOrganization.vue

diff --git a/frontend/components/card/about/CardAbout.vue b/frontend/components/card/about/CardAbout.vue
new file mode 100644
index 000000000..a48aaf723
--- /dev/null
+++ b/frontend/components/card/about/CardAbout.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="card-style px-5 py-5">
+    <div class="relative flex flex-col lg:flex-row">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/card/about/CardAboutEvent.vue b/frontend/components/card/about/CardAboutEvent.vue
new file mode 100644
index 000000000..c2d1efb93
--- /dev/null
+++ b/frontend/components/card/about/CardAboutEvent.vue
@@ -0,0 +1,109 @@
+<template>
+  <CardAbout>
+    <div class="flex-col space-y-3">
+      <div class="flex items-center gap-5">
+        <h3 class="responsive-h3 text-left font-display">
+          {{ $t("_global.about") }}
+        </h3>
+        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+        <ModalEditAboutEvent
+          @closeModal="handleCloseModal"
+          :event="event"
+          :description="event.description"
+          :getInvolved="event.getInvolved"
+          :getInvolvedURL="event.getInvolvedURL"
+          :isOpen="modalIsOpen"
+        />
+      </div>
+      <div class="flex-col space-y-3">
+        <!-- <div class="flex items-center gap-3">
+            <ShieldTopic v-for="(t, i) in event.topics" :key="i" :topic="t" />
+          </div> -->
+        <div>
+          <p
+            ref="description"
+            :class="{
+              'line-clamp-2': !expandText,
+            }"
+          >
+            {{ event.description }}
+          </p>
+          <div class="flex justify-center">
+            <button
+              v-if="!expandText && descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.full-text-aria-label')"
+            >
+              {{ $t("components.card-about.full-text") }}
+            </button>
+            <button
+              v-else-if="descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.reduce-text-aria-label')"
+            >
+              {{ $t("components.card-about.reduce-text") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </CardAbout>
+</template>
+
+<script setup lang="ts">
+import CardAbout from "./CardAbout.vue";
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const event = useEventStore();
+await event.fetchByID(id);
+
+const description = ref();
+const descriptionExpandable = ref(false);
+
+function setDescriptionExpandable(): void {
+  descriptionExpandable.value =
+    description.value.scrollHeight > description.value.clientHeight
+      ? true
+      : false;
+}
+
+onMounted(() => {
+  window.addEventListener("resize", setDescriptionExpandable);
+  setDescriptionExpandable();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", setDescriptionExpandable);
+});
+
+const emit = defineEmits(["expand-reduce-text"]);
+const expandText = ref(false);
+
+function expand_reduce_text() {
+  expandText.value = !expandText.value;
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/card/about/CardAboutGroup.vue b/frontend/components/card/about/CardAboutGroup.vue
new file mode 100644
index 000000000..83c702444
--- /dev/null
+++ b/frontend/components/card/about/CardAboutGroup.vue
@@ -0,0 +1,135 @@
+<template>
+  <CardAbout>
+    <ModalQRCodeBtn v-if="group && !expandText" :group="group" type="icon" />
+    <button
+      v-if="expandText"
+      @click="
+        emit('expand-reduce-text');
+        expand_reduce_text();
+      "
+      class="focus-brand absolute right-0 rounded-full p-1 text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text hover:dark:text-dark-text"
+    >
+      <Icon class="h-10 w-10" :name="IconMap.CIRCLE_X_FILL" />
+    </button>
+    <div class="flex-col space-y-3">
+      <div class="flex items-center gap-5">
+        <h3 class="responsive-h3 text-left font-display">
+          {{ $t("_global.about") }}
+        </h3>
+        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+        <ModalEditAboutGroup
+          @closeModal="handleCloseModal"
+          :group="group"
+          :description="texts.description"
+          :getInvolved="texts.getInvolved"
+          :getInvolvedURL="group.getInvolvedURL"
+          :isOpen="modalIsOpen"
+        />
+      </div>
+      <div class="flex-col space-y-3">
+        <!-- <div class="flex items-center gap-3">
+            <ShieldTopic v-for="(t, i) in group.topics" :key="i" :topic="t" />
+          </div> -->
+        <div class="flex items-center gap-3">
+          <MetaTagLocation :location="group.location" />
+          <!-- <MetaTagMembers
+              :members="group.members.length"
+              :label="$t('components._global.members_lower')"
+            /> -->
+        </div>
+        <div>
+          <p
+            ref="description"
+            :class="{
+              'line-clamp-5': !expandText,
+            }"
+          >
+            {{ texts.description }}
+          </p>
+          <div class="flex justify-center">
+            <button
+              v-if="!expandText && descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.full-text-aria-label')"
+            >
+              {{ $t("components.card-about.full-text") }}
+            </button>
+            <button
+              v-else-if="descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.reduce-text-aria-label')"
+            >
+              {{ $t("components.card-about.reduce-text") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </CardAbout>
+</template>
+
+<script setup lang="ts">
+import type { Group, GroupText } from "~/types/entities/group";
+import { IconMap } from "~/types/icon-map";
+import CardAbout from "./CardAbout.vue";
+
+const props = defineProps<{
+  group: Group;
+}>();
+
+const res = await useAsyncData(
+  async () =>
+    await fetchWithToken(`/entities/group_texts?group_id=${props.group.id}`, {})
+);
+
+const groupTexts = res.data as unknown as GroupText[];
+const texts = groupTexts[0];
+
+const description = ref();
+const descriptionExpandable = ref(false);
+
+function setDescriptionExpandable(): void {
+  descriptionExpandable.value =
+    description.value.scrollHeight > description.value.clientHeight
+      ? true
+      : false;
+}
+
+onMounted(() => {
+  window.addEventListener("resize", setDescriptionExpandable);
+  setDescriptionExpandable();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", setDescriptionExpandable);
+});
+
+const emit = defineEmits(["expand-reduce-text"]);
+const expandText = ref(false);
+
+function expand_reduce_text() {
+  expandText.value = !expandText.value;
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/card/about/CardAboutOrganization.vue b/frontend/components/card/about/CardAboutOrganization.vue
new file mode 100644
index 000000000..599d203cb
--- /dev/null
+++ b/frontend/components/card/about/CardAboutOrganization.vue
@@ -0,0 +1,134 @@
+<template>
+  <CardAbout>
+    <ModalQRCodeBtn
+      v-if="organization && !expandText"
+      :organization="organization"
+      type="icon"
+    />
+    <button
+      v-if="expandText"
+      @click="
+        emit('expand-reduce-text');
+        expand_reduce_text();
+      "
+      class="focus-brand absolute right-0 rounded-full p-1 text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text hover:dark:text-dark-text"
+    >
+      <Icon class="h-10 w-10" :name="IconMap.CIRCLE_X_FILL" />
+    </button>
+    <div class="flex-col space-y-3">
+      <div class="flex items-center gap-5">
+        <h3 class="responsive-h3 text-left font-display">
+          {{ $t("_global.about") }}
+        </h3>
+        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+        <ModalEditAboutOrganization
+          @closeModal="handleCloseModal"
+          :organization="organization"
+          :description="organization.description"
+          :getInvolved="organization.getInvolved"
+          :getInvolvedURL="organization.getInvolvedURL"
+          :isOpen="modalIsOpen"
+        />
+      </div>
+      <div class="flex-col space-y-3">
+        <!-- <div class="flex items-center gap-3">
+            <ShieldTopic v-for="(t, i) in organization.topics" :key="i" :topic="t" />
+          </div> -->
+        <!-- <ShieldTopic :topic="organization.topic" /> -->
+        <div class="flex items-center gap-3">
+          <MetaTagLocation :location="organization.location" />
+          <!-- <MetaTagMembers
+              :members="organization.members.length"
+              :label="$t('components._global.members_lower')"
+            /> -->
+        </div>
+        <div>
+          <p
+            ref="description"
+            :class="{
+              'line-clamp-5': !expandText,
+            }"
+          >
+            {{ organization.description }}
+          </p>
+          <div class="flex justify-center">
+            <button
+              v-if="!expandText && descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.full-text-aria-label')"
+            >
+              {{ $t("components.card-about.full-text") }}
+            </button>
+            <button
+              v-else-if="descriptionExpandable"
+              @click="
+                emit('expand-reduce-text');
+                expand_reduce_text();
+              "
+              class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+              :aria-label="$t('components.card-about.reduce-text-aria-label')"
+            >
+              {{ $t("components.card-about.reduce-text") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </CardAbout>
+</template>
+
+<script setup lang="ts">
+import { IconMap } from "~/types/icon-map";
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const organizationStore = useOrganizationStore();
+await organizationStore.fetchByID(id);
+
+const { organization } = organizationStore;
+
+const description = ref();
+const descriptionExpandable = ref(false);
+
+function setDescriptionExpandable(): void {
+  descriptionExpandable.value =
+    description.value.scrollHeight > description.value.clientHeight
+      ? true
+      : false;
+}
+
+onMounted(() => {
+  window.addEventListener("resize", setDescriptionExpandable);
+  setDescriptionExpandable();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", setDescriptionExpandable);
+});
+
+const emit = defineEmits(["expand-reduce-text"]);
+const expandText = ref(false);
+
+function expand_reduce_text() {
+  expandText.value = !expandText.value;
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/card/get-involved/CardGetInvolved.vue b/frontend/components/card/get-involved/CardGetInvolved.vue
new file mode 100644
index 000000000..4eb123bc7
--- /dev/null
+++ b/frontend/components/card/get-involved/CardGetInvolved.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="card-style px-5 py-5">
+    <div class="relative w-full flex-col">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedEvent.vue b/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
new file mode 100644
index 000000000..8090d044f
--- /dev/null
+++ b/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
@@ -0,0 +1,68 @@
+<template>
+  <CardGetInvolved>
+    <div class="flex items-center gap-5">
+      <h3 class="responsive-h3 text-left font-display">
+        {{ $t("components._global.participate") }}
+      </h3>
+      <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+      <ModalEditAboutEvent
+        v-if="event"
+        @closeModal="handleCloseModal"
+        :event="event"
+        :sectionsToEdit="[
+          $t('_global.about'),
+          $t('components._global.participate'),
+          $t('components._global.offer-to-help-link'),
+        ]"
+        :isOpen="modalIsOpen"
+      />
+    </div>
+    <div class="space-y-3 pt-3">
+      <p v-if="event.getInvolved">
+        {{ event.getInvolved }}
+      </p>
+      <p v-else>{{ $t("components.card-get-involved.participate-subtext") }}</p>
+      <!-- <p>
+        {{ $t("components.card-get-involved.legal-disclaimer-subtext") }}
+      </p>
+      <CardLegalDisclaimer v-if="disclaimer" :disclaimer="disclaimer" /> -->
+      <div class="flex w-max pt-2">
+        <BtnRouteInternal
+          class="w-full"
+          :cta="true"
+          linkTo="/"
+          label="components.btn-route-internal.offer-to-help"
+          fontSize="sm"
+          :rightIcon="IconMap.ARROW_RIGHT"
+          iconSize="1.45em"
+          ariaLabel="components.btn-route-internal.offer-to-help-aria-label"
+        />
+      </div>
+    </div>
+  </CardGetInvolved>
+</template>
+
+<script setup lang="ts">
+import type { Event } from "~/types/events/event";
+import { IconMap } from "~/types/icon-map";
+import CardGetInvolved from "./CardGetInvolved.vue";
+
+defineProps<{
+  event: Event;
+  disclaimer?: string;
+}>();
+
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedGroup.vue b/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
new file mode 100644
index 000000000..91658b8a1
--- /dev/null
+++ b/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
@@ -0,0 +1,67 @@
+<template>
+  <CardGetInvolved>
+    <div class="flex items-center gap-5">
+      <h3 class="responsive-h3 text-left font-display">
+        {{ $t("components._global.get-involved") }}
+      </h3>
+      <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+      <ModalEditAboutGroup
+        v-if="group"
+        @closeModal="handleCloseModal"
+        :group="group"
+        :name="group.name"
+        :sectionsToEdit="[
+          $t('_global.about'),
+          $t('components._global.get-involved'),
+          $t('components._global.join-group-link'),
+        ]"
+        :isOpen="modalIsOpen"
+      />
+      <div class="flex space-x-2 pt-2 lg:absolute lg:right-0 lg:pt-0">
+        <BtnRouteInternal
+          v-if="group.getInvolvedURL"
+          :cta="true"
+          :linkTo="group.getInvolvedURL"
+          label="components.btn-route-internal.join-group"
+          fontSize="sm"
+          :rightIcon="IconMap.ARROW_RIGHT"
+          iconSize="1.45em"
+          ariaLabel="components.btn-route-internal.join-group-aria-label"
+        />
+      </div>
+    </div>
+    <div class="space-y-3 pt-3">
+      <p>
+        {{
+          $t("components.card-get-involved.join-group-subtext", {
+            org_name: group.name,
+          })
+        }}.
+      </p>
+    </div>
+  </CardGetInvolved>
+</template>
+
+<script setup lang="ts">
+import type { Group } from "~/types/entities/group";
+import { IconMap } from "~/types/icon-map";
+
+defineProps<{
+  group: Group;
+  disclaimer?: string;
+}>();
+
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
new file mode 100644
index 000000000..bcca4bed1
--- /dev/null
+++ b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
@@ -0,0 +1,88 @@
+<template>
+  <CardGetInvolved>
+    <div class="flex items-center gap-5">
+      <h3 class="responsive-h3 text-left font-display">
+        {{ $t("components._global.get-involved") }}
+      </h3>
+      <IconEdit @click="openModal()" @keydown.enter="openModal()" />
+      <ModalEditAboutOrganization
+        @closeModal="handleCloseModal"
+        :organization="organization"
+        :description="organization.description"
+        :getInvolved="organization.getInvolved"
+        :getInvolvedURL="organization.getInvolvedURL"
+        :isOpen="modalIsOpen"
+      />
+    </div>
+    <div class="flex space-x-2 pt-2 lg:absolute lg:right-0 lg:pt-0">
+      <BtnRouteInternal
+        v-if="organization.groups && organization.groups.length > 0"
+        :cta="true"
+        :linkTo="'/organizations/' + id + '/groups'"
+        label="components.btn-route-internal.view-all-groups"
+        fontSize="sm"
+        ariaLabel="components.btn-route-internal.view-all-groups-aria-label"
+      />
+      <BtnRouteInternal
+        v-if="organization && organization.getInvolvedURL"
+        :cta="true"
+        :linkTo="organization.getInvolvedURL"
+        label="components.btn-route-internal.join-organization"
+        fontSize="sm"
+        :rightIcon="IconMap.ARROW_RIGHT"
+        iconSize="1.45em"
+        ariaLabel="components.btn-route-internal.join-organization-aria-label"
+      />
+    </div>
+    <div class="mt-4">
+      <div v-if="organization.groups && organization.groups.length > 0">
+        <p>
+          {{
+            $t("components.card-get-involved.working-groups-subtext", {
+              entity_name: organization.name,
+            })
+          }}:
+        </p>
+        <Feed :organization="organization" />
+      </div>
+      <div v-else>
+        <p v-if="organization.getInvolved">
+          {{ organization.getInvolved }}
+        </p>
+        <p v-else>
+          {{
+            $t("components.card-get-involved.join-organization-subtext", {
+              entity_name: organization.name,
+            })
+          }}.
+        </p>
+      </div>
+    </div>
+  </CardGetInvolved>
+</template>
+
+<script setup lang="ts">
+import { IconMap } from "~/types/icon-map";
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const organizationStore = useOrganizationStore();
+await organizationStore.fetchByID(id);
+
+const { organization } = organizationStore;
+
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
+const modalIsOpen = ref(false);
+
+function openModal() {
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+}
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
+};
+</script>
diff --git a/frontend/components/modal/ModalCommandPalette.vue b/frontend/components/modal/command-palette/ModalCommandPalette.vue
similarity index 100%
rename from frontend/components/modal/ModalCommandPalette.vue
rename to frontend/components/modal/command-palette/ModalCommandPalette.vue
diff --git a/frontend/components/modal/ModalEditPageText.vue b/frontend/components/modal/edit/ModalEditFaqEntry.vue
similarity index 95%
rename from frontend/components/modal/ModalEditPageText.vue
rename to frontend/components/modal/edit/ModalEditFaqEntry.vue
index 744b1c01c..84d842c16 100644
--- a/frontend/components/modal/ModalEditPageText.vue
+++ b/frontend/components/modal/edit/ModalEditFaqEntry.vue
@@ -44,8 +44,11 @@
 </template>
 
 <script setup lang="ts">
+import type { FaqEntry } from "~/types/content/faq-entry";
+
 const props = defineProps<{
   name?: string;
+  faqEntry: FaqEntry;
   sectionsToEdit: string[];
   textsToEdit: string[];
   isOpen: boolean;
@@ -69,7 +72,7 @@ const translatedTexts = computed(() => {
 });
 
 const modals = useModals();
-const modalName = "ModalEditPageText";
+const modalName = "ModalEditFAQEntry";
 let modalIsOpen = computed(() => props.isOpen);
 
 onMounted(() => {
diff --git a/frontend/components/modal/edit/about/ModalEditAboutEvent.vue b/frontend/components/modal/edit/about/ModalEditAboutEvent.vue
new file mode 100644
index 000000000..482664338
--- /dev/null
+++ b/frontend/components/modal/edit/about/ModalEditAboutEvent.vue
@@ -0,0 +1,93 @@
+<template>
+  <ModalBase
+    @closeModal="handleCloseModal"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
+  >
+    <div class="flex flex-col space-y-7">
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("_global.about")
+        }}</label>
+        <textarea
+          v-model="formData.description"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("components._global.participate")
+        }}</label>
+        <textarea
+          v-model="formData.getInvolved"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <div class="flex flex-col space-y-2">
+          <label for="input" class="responsive-h2">{{
+            $t("components._global.offer-to-help-link")
+          }}</label>
+          <p>{{ $t("components.modal-edit-page-text.remember-https") }}</p>
+          <input
+            v-model="formData.getInvolvedURL"
+            id="textarea"
+            class="focus-brand elem-shadow-sm min-h-12 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+          />
+        </div>
+      </div>
+      <BtnAction
+        @click="handleSubmit()"
+        :cta="true"
+        :label="$t('components.modal-edit-page-text.update-texts')"
+        fontSize="base"
+        :ariaLabel="
+          $t('components.modal-edit-page-text.update-texts-aria-label')
+        "
+      />
+    </div>
+  </ModalBase>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isOpen: boolean;
+}>();
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const event = useEventStore();
+await event.fetchByID(id);
+
+const formData = ref({
+  description: event.description,
+  getInvolved: event.getInvolved,
+  getInvolvedURL: event.getInvolvedURL,
+});
+
+async function handleSubmit() {
+  const response = await putWithToken(
+    `/events/event_texts/${event.id}/`,
+    formData
+  );
+
+  if (response) {
+    console.log("Success!");
+  }
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+};
+</script>
diff --git a/frontend/components/modal/edit/about/ModalEditAboutGroup.vue b/frontend/components/modal/edit/about/ModalEditAboutGroup.vue
new file mode 100644
index 000000000..7dd4b277b
--- /dev/null
+++ b/frontend/components/modal/edit/about/ModalEditAboutGroup.vue
@@ -0,0 +1,93 @@
+<template>
+  <ModalBase
+    @closeModal="handleCloseModal"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
+  >
+    <div class="flex flex-col space-y-7">
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("_global.about")
+        }}</label>
+        <textarea
+          v-model="formData.description"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("components._global.get-involved")
+        }}</label>
+        <textarea
+          v-model="formData.getInvolved"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <div class="flex flex-col space-y-2">
+          <label for="input" class="responsive-h2">{{
+            $t("components._global.join-group-link")
+          }}</label>
+          <p>{{ $t("components.modal-edit-page-text.remember-https") }}</p>
+          <input
+            v-model="formData.getInvolvedURL"
+            id="textarea"
+            class="focus-brand elem-shadow-sm min-h-12 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+          />
+        </div>
+      </div>
+      <BtnAction
+        @click="handleSubmit()"
+        :cta="true"
+        :label="$t('components.modal-edit-page-text.update-texts')"
+        fontSize="base"
+        :ariaLabel="
+          $t('components.modal-edit-page-text.update-texts-aria-label')
+        "
+      />
+    </div>
+  </ModalBase>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isOpen: boolean;
+}>();
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const group = useGroupStore();
+await group.fetchByID(id);
+
+const formData = ref({
+  description: group.description,
+  getInvolved: group.getInvolved,
+  getInvolvedURL: group.getInvolvedURL,
+});
+
+async function handleSubmit() {
+  const response = await putWithToken(
+    `/entities/group_texts/${group.id}/`,
+    formData
+  );
+
+  if (response) {
+    console.log("Success!");
+  }
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+};
+</script>
diff --git a/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue b/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
new file mode 100644
index 000000000..80dd33749
--- /dev/null
+++ b/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
@@ -0,0 +1,102 @@
+<template>
+  <ModalBase
+    @closeModal="handleCloseModal"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
+  >
+    <div class="flex flex-col space-y-7">
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("_global.about")
+        }}</label>
+        <textarea
+          v-model="formData.description"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <label for="textarea" class="responsive-h2">{{
+          $t("components._global.get-involved")
+        }}</label>
+        <textarea
+          v-model="formData.getInvolved"
+          id="textarea"
+          class="focus-brand elem-shadow-sm min-h-32 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+        />
+      </div>
+      <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
+        <div class="flex flex-col space-y-2">
+          <label for="input" class="responsive-h2">{{
+            $t("components._global.join-organization-link")
+          }}</label>
+          <p>{{ $t("components.modal-edit-page-text.remember-https") }}</p>
+          <input
+            v-model="formData.getInvolvedURL"
+            id="textarea"
+            class="focus-brand elem-shadow-sm min-h-12 rounded-md bg-light-layer-2 px-3 py-2 dark:bg-dark-layer-2"
+          />
+        </div>
+      </div>
+      <BtnAction
+        @click="handleSubmit()"
+        :cta="true"
+        :label="$t('components.modal-edit-page-text.update-texts')"
+        fontSize="base"
+        :ariaLabel="
+          $t('components.modal-edit-page-text.update-texts-aria-label')
+        "
+      />
+    </div>
+  </ModalBase>
+</template>
+
+<script setup lang="ts">
+import type { OrganizationUpdateTextFormData } from "~/types/entities/organization";
+
+const props = defineProps<{
+  isOpen: boolean;
+}>();
+
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const organizationStore = useOrganizationStore();
+await organizationStore.fetchByID(id);
+
+const { organization } = organizationStore;
+
+const formData = ref<OrganizationUpdateTextFormData>({
+  description: "",
+  getInvolved: "",
+  getInvolvedURL: "",
+});
+
+onMounted(() => {
+  formData.value.description = organization.description;
+  formData.value.getInvolved = organization.getInvolved;
+  formData.value.getInvolvedURL = organization.getInvolvedURL;
+});
+
+async function handleSubmit() {
+  const response = await organizationStore.updateTexts(
+    organization,
+    formData.value
+  );
+  if (response) {
+    handleCloseModal();
+  }
+}
+
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
+
+const handleCloseModal = () => {
+  modals.closeModal(modalName);
+};
+</script>

From b2dc8045f0e262402f5b5a661607d9f59c03e601 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Mon, 1 Jul 2024 00:27:03 +0200
Subject: [PATCH 6/8] #854 remove files that were moved to fix merge conflicts

---
 frontend/components/card/CardAbout.vue       | 259 -------------------
 frontend/components/card/CardGetInvolved.vue | 174 -------------
 2 files changed, 433 deletions(-)
 delete mode 100644 frontend/components/card/CardAbout.vue
 delete mode 100644 frontend/components/card/CardGetInvolved.vue

diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
deleted file mode 100644
index dff86acf8..000000000
--- a/frontend/components/card/CardAbout.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-  <div class="card-style px-5 py-5">
-    <div class="relative w-full flex-col">
-      <ModalQRCodeBtn
-        v-if="organization && !expandText"
-        :organization="organization"
-        type="icon"
-      />
-      <ModalQRCodeBtn v-if="group && !expandText" :group="group" type="icon" />
-      <button
-        v-if="expandText"
-        @click="
-          emit('expand-reduce-text');
-          expand_reduce_text();
-        "
-        class="focus-brand absolute right-0 rounded-full p-1 text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text hover:dark:text-dark-text"
-      >
-        <Icon class="h-10 w-10" :name="IconMap.CIRCLE_X_FILL" />
-      </button>
-      <div class="flex-col space-y-3">
-        <div class="flex items-center gap-5">
-          <h3 class="responsive-h3 text-left font-display">
-            {{ $t("_global.about") }}
-          </h3>
-          <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-          <ModalEditPageText
-            v-if="organization"
-            @closeModal="handleCloseModal"
-            :name="organization.name"
-            :sectionsToEdit="[
-              $t('_global.about'),
-              $t('components._global.get-involved'),
-              $t('components._global.join-organization-link'),
-            ]"
-            :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-            :isOpen="modalIsOpen"
-          />
-          <ModalEditPageText
-            v-if="group"
-            @closeModal="handleCloseModal"
-            :name="group.name"
-            :sectionsToEdit="[
-              $t('_global.about'),
-              $t('components._global.get-involved'),
-              $t('components._global.join-group-link'),
-            ]"
-            :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-            :isOpen="modalIsOpen"
-          />
-          <ModalEditPageText
-            v-if="event"
-            @closeModal="handleCloseModal"
-            :sectionsToEdit="[
-              $t('_global.about'),
-              $t('components._global.participate'),
-              $t('components._global.offer-to-help-link'),
-            ]"
-            :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-            :isOpen="modalIsOpen"
-          />
-        </div>
-        <div v-if="organization" class="flex-col space-y-3">
-          <!-- <div class="flex items-center gap-3">
-            <ShieldTopic v-for="(t, i) in organization.topics" :key="i" :topic="t" />
-          </div> -->
-          <!-- <ShieldTopic :topic="organization.topic" /> -->
-          <div class="flex items-center gap-3">
-            <MetaTagLocation :location="organization.location" />
-            <!-- <MetaTagMembers
-              :members="organization.members.length"
-              :label="$t('components._global.members_lower')"
-            /> -->
-          </div>
-          <div>
-            <p
-              ref="description"
-              :class="{
-                'line-clamp-5': !expandText,
-              }"
-            >
-              {{ organization.description }}
-            </p>
-            <div class="flex justify-center">
-              <button
-                v-if="!expandText && descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.full-text-aria-label')"
-              >
-                {{ $t("components.card-about.full-text") }}
-              </button>
-              <button
-                v-else-if="descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.reduce-text-aria-label')"
-              >
-                {{ $t("components.card-about.reduce-text") }}
-              </button>
-            </div>
-          </div>
-        </div>
-        <div v-else-if="group" class="flex-col space-y-3">
-          <!-- <div class="flex items-center gap-3">
-            <ShieldTopic v-for="(t, i) in group.topics" :key="i" :topic="t" />
-          </div> -->
-          <div class="flex items-center gap-3">
-            <MetaTagLocation :location="group.location" />
-            <!-- <MetaTagMembers
-              :members="group.members.length"
-              :label="$t('components._global.members_lower')"
-            /> -->
-          </div>
-          <div>
-            <p
-              ref="description"
-              :class="{
-                'line-clamp-5': !expandText,
-              }"
-            >
-              {{ group.description }}
-            </p>
-            <div class="flex justify-center">
-              <button
-                v-if="!expandText && descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.full-text-aria-label')"
-              >
-                {{ $t("components.card-about.full-text") }}
-              </button>
-              <button
-                v-else-if="descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.reduce-text-aria-label')"
-              >
-                {{ $t("components.card-about.reduce-text") }}
-              </button>
-            </div>
-          </div>
-        </div>
-        <div v-else-if="event" class="flex-col space-y-3">
-          <!-- <div class="flex items-center gap-3">
-            <ShieldTopic v-for="(t, i) in event.topics" :key="i" :topic="t" />
-          </div> -->
-          <div>
-            <p
-              ref="description"
-              :class="{
-                'line-clamp-2': !expandText,
-              }"
-            >
-              {{ event.description }}
-            </p>
-            <div class="flex justify-center">
-              <button
-                v-if="!expandText && descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.full-text-aria-label')"
-              >
-                {{ $t("components.card-about.full-text") }}
-              </button>
-              <button
-                v-else-if="descriptionExpandable"
-                @click="
-                  emit('expand-reduce-text');
-                  expand_reduce_text();
-                "
-                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
-                :aria-label="$t('components.card-about.reduce-text-aria-label')"
-              >
-                {{ $t("components.card-about.reduce-text") }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  useDescriptionText,
-  useGetInvolvedText,
-  useGetInvolvedURL,
-} from "~/composables/useAppPageTexts";
-import type { Event } from "~/types/event";
-import type { Group } from "~/types/group";
-import { IconMap } from "~/types/icon-map";
-import type { Organization } from "~/types/organization";
-import ModalEditPageText from "../modal/ModalEditPageText.vue";
-
-const props = defineProps<{
-  organization?: Organization;
-  group?: Group;
-  event?: Event;
-}>();
-
-const { descriptionText } = useDescriptionText(props);
-const { getInvolvedText } = useGetInvolvedText(props);
-const { getInvolvedURL } = useGetInvolvedURL(props);
-
-const description = ref();
-const descriptionExpandable = ref(false);
-
-function setDescriptionExpandable(): void {
-  descriptionExpandable.value =
-    description.value.scrollHeight > description.value.clientHeight
-      ? true
-      : false;
-}
-
-onMounted(() => {
-  window.addEventListener("resize", setDescriptionExpandable);
-  setDescriptionExpandable();
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", setDescriptionExpandable);
-});
-
-const emit = defineEmits(["expand-reduce-text"]);
-const expandText = ref(false);
-
-function expand_reduce_text() {
-  expandText.value = !expandText.value;
-}
-const modals = useModals();
-const modalName = "ModalEditPageText";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
-</script>
diff --git a/frontend/components/card/CardGetInvolved.vue b/frontend/components/card/CardGetInvolved.vue
deleted file mode 100644
index 2b08f4a33..000000000
--- a/frontend/components/card/CardGetInvolved.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <div class="card-style px-5 py-5">
-    <div class="relative flex flex-col lg:flex-row">
-      <div class="flex items-center gap-5">
-        <h3
-          v-if="organization || group"
-          class="responsive-h3 text-left font-display"
-        >
-          {{ $t("components._global.get-involved") }}
-        </h3>
-        <h3 v-else class="responsive-h3 text-left font-display">
-          {{ $t("components._global.participate") }}
-        </h3>
-        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-        <ModalEditPageText
-          v-if="organization"
-          @closeModal="handleCloseModal"
-          :name="organization.name"
-          :sectionsToEdit="[
-            $t('_global.about'),
-            $t('components._global.get-involved'),
-            $t('components._global.join-organization-link'),
-          ]"
-          :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-          :isOpen="modalIsOpen"
-        />
-        <ModalEditPageText
-          v-if="group"
-          @closeModal="handleCloseModal"
-          :name="group.name"
-          :sectionsToEdit="[
-            $t('_global.about'),
-            $t('components._global.get-involved'),
-            $t('components._global.join-group-link'),
-          ]"
-          :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-          :isOpen="modalIsOpen"
-        />
-        <ModalEditPageText
-          v-if="event"
-          @closeModal="handleCloseModal"
-          :sectionsToEdit="[
-            $t('_global.about'),
-            $t('components._global.participate'),
-            $t('components._global.offer-to-help-link'),
-          ]"
-          :textsToEdit="[descriptionText, getInvolvedText, getInvolvedURL]"
-          :isOpen="modalIsOpen"
-        />
-      </div>
-      <div class="flex space-x-2 pt-2 lg:absolute lg:right-0 lg:pt-0">
-        <BtnRouteInternal
-          v-if="organization && organization.groups"
-          :cta="true"
-          :linkTo="'/organizations/' + id + '/groups'"
-          label="components.btn-route-internal.view-all-groups"
-          fontSize="sm"
-          ariaLabel="components.btn-route-internal.view-all-groups-aria-label"
-        />
-        <BtnRouteInternal
-          v-if="organization && organization.getInvolvedURL"
-          :cta="true"
-          :linkTo="organization.getInvolvedURL"
-          label="components.btn-route-internal.join-organization"
-          fontSize="sm"
-          :rightIcon="IconMap.ARROW_RIGHT"
-          iconSize="1.45em"
-          ariaLabel="components.btn-route-internal.join-organization-aria-label"
-        />
-        <BtnRouteInternal
-          v-else-if="group && group.getInvolvedURL"
-          :cta="true"
-          :linkTo="group.getInvolvedURL"
-          label="components.btn-route-internal.join-group"
-          fontSize="sm"
-          :rightIcon="IconMap.ARROW_RIGHT"
-          iconSize="1.45em"
-          ariaLabel="components.btn-route-internal.join-group-aria-label"
-        />
-      </div>
-    </div>
-    <div v-if="organization" class="mt-4">
-      <div v-if="organization.groups">
-        <p>
-          {{
-            $t("components.card-get-involved.working-groups-subtext", {
-              entity_name: organization.name,
-            })
-          }}:
-        </p>
-        <Feed :organization="organization" />
-      </div>
-      <div v-else>
-        <p>
-          {{
-            $t("components.card-get-involved.join-organization-subtext", {
-              entity_name: organization.name,
-            })
-          }}.
-        </p>
-      </div>
-    </div>
-    <div v-else-if="group" class="space-y-3 pt-3">
-      <p>
-        {{
-          $t("components.card-get-involved.join-group-subtext", {
-            org_name: group.name,
-          })
-        }}.
-      </p>
-    </div>
-    <div v-else-if="event" class="space-y-3 pt-3">
-      <p v-if="event.getInvolved">
-        {{ event.getInvolved }}
-      </p>
-      <p v-else>{{ $t("components.card-get-involved.participate-subtext") }}</p>
-      <!-- <p>
-        {{ $t("components.card-get-involved.legal-disclaimer-subtext") }}
-      </p>
-      <CardLegalDisclaimer v-if="disclaimer" :disclaimer="disclaimer" /> -->
-      <div class="flex w-max pt-2">
-        <BtnRouteInternal
-          class="w-full"
-          :cta="true"
-          linkTo="/"
-          label="components.btn-route-internal.offer-to-help"
-          fontSize="sm"
-          :rightIcon="IconMap.ARROW_RIGHT"
-          iconSize="1.45em"
-          ariaLabel="components.btn-route-internal.offer-to-help-aria-label"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  useDescriptionText,
-  useGetInvolvedText,
-  useGetInvolvedURL,
-} from "~/composables/useAppPageTexts";
-import type { Event } from "~/types/event";
-import type { Group } from "~/types/group";
-import { IconMap } from "~/types/icon-map";
-import type { Organization } from "~/types/organization";
-
-const props = defineProps<{
-  organization?: Organization;
-  group?: Group;
-  event?: Event;
-  disclaimer?: string;
-}>();
-
-const { descriptionText } = useDescriptionText(props);
-const { getInvolvedText } = useGetInvolvedText(props);
-const { getInvolvedURL } = useGetInvolvedURL(props);
-
-const { id } = useRoute().params;
-
-const modals = useModals();
-const modalName = "ModalEditPageText";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
-</script>

From 74eee88065738ffc687e413dd2c4b699ed6bc7f2 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Mon, 1 Jul 2024 00:57:08 +0200
Subject: [PATCH 7/8] #854 remove function re-declaration

---
 .../components/modal/command-palette/ModalCommandPalette.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/components/modal/command-palette/ModalCommandPalette.vue b/frontend/components/modal/command-palette/ModalCommandPalette.vue
index 15b53b41e..ab80dbda8 100644
--- a/frontend/components/modal/command-palette/ModalCommandPalette.vue
+++ b/frontend/components/modal/command-palette/ModalCommandPalette.vue
@@ -147,11 +147,6 @@ function handleCloseModal() {
 const searchTerm = ref("");
 // const searchResults = []
 
-const emit = defineEmits(["closeModal"]);
-const handleCloseModal = () => {
-  emit("closeModal");
-};
-
 // Watch the searchTerm ref variable.
 watch(searchTerm, (newVal) => {
   console.log("searchTerm changed: " + newVal);

From 33a3fa9fca00a6c82685fa506cce8107390c7642 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Mon, 1 Jul 2024 01:02:46 +0200
Subject: [PATCH 8/8] #854 remove unneeded event text variables as will be
 store reference

---
 frontend/components/card/CardDetails.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index 8cc1a58b4..814922ca5 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -46,14 +46,10 @@
 <script setup lang="ts">
 import type { Event } from "~/types/events/event";
 
-const props = defineProps<{
+defineProps<{
   event?: Event;
 }>();
 
-const { descriptionText } = useDescriptionText(props);
-const { getInvolvedText } = useGetInvolvedText(props);
-const { getInvolvedURL } = useGetInvolvedURL(props);
-
 const modals = useModals();
 const modalName = "ModalEditPageText";