feat: move modal out of views and into global app context

src/App.vue

@@ -2,6 +2,9 @@
 import { ref, provide } from "vue";
 import { RouterView } from "vue-router";
 import { isWarnKey, modalResultKey, nsfwKey, showModalKey } from "@/keys";
+import RefModal from "@/components/RefModal.vue";
+import ButtonGroup from "@/components/ButtonGroup.vue";
+import Button from "@/components/RefButton.vue";
 import SiteHeader from "@/components/SiteHeader.vue";
 import SiteFooter from "@/components/SiteFooter.vue";
 import SiteNavigation from "@/components/SiteNavigation.vue";
@@ -13,10 +16,11 @@ const isNsfw = ref(false);
 const isConfirmedHorny = ref(false);
 const isWarn = ref(false);
 
+const nsfwmodal = ref<InstanceType<typeof RefModal>>();
+
 const showModal = (): void => {
   if (!isConfirmedHorny.value) {
-    isWarn.value = true;
-    document.body.classList.add("scroll-lock");
+    nsfwmodal.value?.showModal();
 
     setTimeout(() => {
       isNsfw.value = false;
@@ -29,8 +33,7 @@ const showModal = (): void => {
 const modalResult = (value: boolean): void => {
   isNsfw.value = value;
   isConfirmedHorny.value = value;
-  isWarn.value = false;
-  document.body.classList.remove("scroll-lock");
+  nsfwmodal.value?.close();
 };
 
 provide(isWarnKey, isWarn);
@@ -40,6 +43,29 @@ provide(showModalKey, showModal);
 </script>
 
 <template>
+  <RefModal id="nsfw-warning" ref="nsfwmodal">
+    <template #heading>
+      ⚠️⚠️⚠️<br />
+      Whoa, Nelly!
+    </template>
+
+    <template #message>
+      By enabling NSFW mode you confirm that you are of legal age to view adult
+      content.
+    </template>
+
+    <template #buttons>
+      <ButtonGroup col>
+        <Button positive @click.prevent="modalResult(true)">
+          Yes, show me the goods 👀
+        </Button>
+        <Button negative @click.prevent="modalResult(false)">
+          NO, STAHP 😱
+        </Button>
+      </ButtonGroup>
+    </template>
+  </RefModal>
+
   <SiteHeader>
     <!-- max 500px -->
     <picture>

src/views/AnatomyView.vue

@@ -5,7 +5,6 @@ import type { ColorDict } from "@/interfaces";
 import { tailLength, wingspan, penis, colors } from "@/sebin";
 import { toImperial, toFahrenheit } from "@/helpers";
 import RefToggle from "@/components/RefToggle.vue";
-import RefModal from "@/components/RefModal.vue";
 import RefGallery from "@/components/RefGallery.vue";
 import RefFigure from "@/components/RefFigure.vue";
 import ColorTable from "@/components/ColorTable.vue";
@@ -39,21 +38,6 @@ const showModal = inject<Function>(showModalKey, Function);
 </script>
 
 <template>
-  <RefModal v-show="isWarn">
-    <template #heading>
-      ⚠️⚠️⚠️<br />
-      Whoa, Nelly!
-    </template>
-
-    <template #message>
-      By enabling NSFW mode you confirm that you are of legal age to view adult
-      content.
-    </template>
-
-    <template #yes>Yes, show me the goods 👀</template>
-    <template #no>NO, STAHP 😱</template>
-  </RefModal>
-
   <section>
     <h1>{{ $route.name }}</h1>
   </section>

src/views/GeneralView.vue

@@ -21,7 +21,6 @@ import type { Kink } from "@/interfaces";
 import DataTable from "@/components/DataTable.vue";
 import QuickFacts from "@/components/QuickFacts.vue";
 import RefToggle from "@/components/RefToggle.vue";
-import RefModal from "@/components/RefModal.vue";
 
 const generalHeadings = ["Key", "Value"];
 const generalData = [
@@ -57,21 +56,6 @@ const showModal = inject<Function>(showModalKey, Function);
 </script>
 
 <template>
-  <RefModal v-show="isWarn">
-    <template #heading>
-      ⚠️⚠️⚠️<br />
-      Whoa, Nelly!
-    </template>
-
-    <template #message>
-      By enabling NSFW mode you confirm that you are of legal age to view adult
-      content.
-    </template>
-
-    <template #yes>Yes, show me the goods 👀</template>
-    <template #no>NO, STAHP 😱</template>
-  </RefModal>
-
   <section>
     <h1>{{ $route.name }}</h1>
 

src/views/HomeView.vue

@@ -2,7 +2,6 @@
 import { inject } from "vue";
 import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
 import RefToggle from "@/components/RefToggle.vue";
-import RefModal from "@/components/RefModal.vue";
 import WelcomeHeader from "@/components/WelcomeHeader.vue";
 import ButtonGroup from "@/components/ButtonGroup.vue";
 import Button from "@/components/RefButton.vue";
@@ -13,21 +12,6 @@ const showModal = inject<Function>(showModalKey, Function);
 </script>
 
 <template>
-  <RefModal v-show="isWarn">
-    <template #heading>
-      ⚠️⚠️⚠️<br />
-      Whoa, Nelly!
-    </template>
-
-    <template #message>
-      By enabling NSFW mode you confirm that you are of legal age to view adult
-      content.
-    </template>
-
-    <template #yes>Yes, show me the goods 👀</template>
-    <template #no>NO, STAHP 😱</template>
-  </RefModal>
-
   <WelcomeHeader>
     <template #main>Sebin Nyshkim</template>
     <template #sub>Character Reference Page</template>