feat(contact): use new confirm modal and buttons

app/components/Contact/BottomScreen/Bars.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-const props = defineProps<{
-  okLabel: "Copy" | "Open";
-}>();
-
 const store = useContactStore();
 
 const { assets } = useAssets();
@@ -20,13 +16,11 @@ useRender((ctx) => {
   );
 
   // bottom bar
-  ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
-  ctx.drawImage(assets.contact.bottomScreen.bottomBar, 0, 0);
-
-  ctx.drawImage(assets.contact.bottomScreen.okButton, 144, 4);
-  ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-  ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
+  ctx.drawImage(
+    assets.contact.bottomScreen.bottomBar,
+    0,
+    store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24,
+  );
 });
 
 defineOptions({

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 " } });
+    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>