feat(contact): use new confirm modal and buttons

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+// TODO: buttons should take in account opacity
+
 import Background from "./Background.vue";
 import Buttons from "./Buttons.vue";
 import ButtonSelector from "~/components/Common/ButtonSelector.vue";
 import Bars from "./Bars.vue";
 
 const store = useContactStore();
+const { open: openModal, state: modalState } = useConfirmationModal();
 
 const ACTIONS = {
   github: ["Open", "Github profile", "https://github.com/pihkaal"],
@@ -55,8 +58,12 @@ const actionateButton = async (button: (typeof selectedButton)["value"]) => {
       console.error("Failed to copy to clipboard:", error);
     }
   } else {
-    await navigateTo(content, { open: { target: "_blank " } });
-    store.pushNotification(`${verb} opened`);
+    const url = content.replace(/^https?:\/\//, "");
+    openModal(`Open ${url}?`, async () => {
+      store.pushNotification(`${verb} opened`);
+      await sleep(100);
+      await navigateTo(content, { open: { target: "_blank " } });
+    });
   }
 };
 
@@ -64,6 +71,10 @@ const QUIT_BUTTON: Rect = [31, 172, 80, 18];
 const OK_BUTTON: Rect = [144, 172, 80, 18];
 
 useScreenClick((x, y) => {
+  if (modalState.value.isOpen) {
+    return;
+  }
+
   if (rectContains(QUIT_BUTTON, [x, y])) {
     store.animateOutro();
   } else if (rectContains(OK_BUTTON, [x, y])) {
@@ -72,6 +83,8 @@ useScreenClick((x, y) => {
 });
 
 useKeyDown((key) => {
+  if (modalState.value.isOpen) return;
+
   switch (key) {
     case "NDS_B":
       store.animateOutro();
@@ -91,5 +104,18 @@ useKeyDown((key) => {
     "
   />
 
-  <Bars :ok-label="ACTIONS[selectedButton][0]" />
+  <Bars />
+  <CommonConfirmationModal />
+  <CommonButtons
+    :y-offset="
+      store.isIntro
+        ? store.intro.bottomBarY - (SCREEN_HEIGHT - 24)
+        : modalState.buttonsYOffset
+    "
+    :opacity="
+      store.isIntro ? store.intro.stage3Opacity : store.outro.stage2Opacity
+    "
+    b-label="Quit"
+    :a-label="ACTIONS[selectedButton][0]"
+  />
 </template>