From a8cc100e06916f872c513b27ea3ce711dbfafd85 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Fri, 19 Dec 2025 19:18:03 +0100
Subject: [PATCH] feat(contact): use new confirm modal and buttons

---
 app/components/Contact/BottomScreen/Bars.vue  |  16 +++------
 .../Contact/BottomScreen/BottomScreen.vue     |  32 ++++++++++++++++--
 .../contact/bottom-screen/bottom-bar.webp     | Bin 438 -> 148 bytes
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/app/components/Contact/BottomScreen/Bars.vue b/app/components/Contact/BottomScreen/Bars.vue
index a3016ae..6659989 100644
--- a/app/components/Contact/BottomScreen/Bars.vue
+++ b/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({
diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue
index 5a98914..3995999 100644
--- a/app/components/Contact/BottomScreen/BottomScreen.vue
+++ b/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>
diff --git a/public/images/contact/bottom-screen/bottom-bar.webp b/public/images/contact/bottom-screen/bottom-bar.webp
index 386613fb3d0a86611df87f5a7fb4c0a1ff571ea2..e9f5b0c5578528390b25d97678f40d91f95ea8d1 100644
GIT binary patch
literal 148
zcmV;F0BiqJNk&GD00012MM6+kP&iC~0000l|G)(RHLz(TNfL#{yy1om;b1g`8wf|}
z?fIe^qix&t|0he$Iygu)3>g!riTZCgZJWAyu6xEv%xCuL&+5~k-G!gSthWO;0f1WX
zyXOGXCjiD42k0&U$_Zd>alpvj^m$5#(#_a%dw~p;(txt%E?u1TPg~r>^{jW7@h$*x
C-9~)?

literal 438
zcmV;n0ZIN+Nk&Gl0RRA3MM6+kP&iDY0RR9m|G)(R&!8xh6ld`-4CKHsTo@ZlBT0((
z<T>(Bh!l{xN1o#!#ckV0^8U+Yi;h$Gch~bD63t}y1~F@as2Ct7q-7A@VUl)(=n6?X
zby<+jdZOnPqX?kz+yItryKNhSO})6=``;-5GJpy+ldp*WJ967Lkfe?eMLO_wPy2=6
z<@@^g_o?=KFrW7N4gOfZE#`J8P2!;ynGPiKu*cm1ht8D_v*FyeNpz9~$Lv{$p6?eO
zU>5b9XpV8WCiM#uJ~NH-1vB68DjTAvY!10U%t^I`L~uPg+V81EPy6LLa1PrDWtihO
z<i8VXy37JwKtubLbAVkWNpn`Q>Jphm*H}dHx}Nqc=b#Zinaxf9z1&x8Qd*~SJ%mJX
z4Lir*)X;wA95h)hal(sL|Iph+lw@%%u?~qRZ-B%sNt!b%q%LbA5)~^|Iwal%BW7?(
z(v!^*>*-W~=r(L2xD>b0C`MrpWrI)1J{}_3Tt>$AY&mFqiC1|&7&#teu{i{<;cTh@
gp`{LE;pcGwyNB^~?*E~m@39<4gKV!p+wtOa1XK;vxBvhE