feat(contact): notifications system + action

app/components/Contact/BottomScreen/Bars.vue

@@ -1,20 +1,31 @@
 <script setup lang="ts">
+const props = defineProps<{
+  okLabel: "Copy" | "Open";
+}>();
+
 const store = useContactStore();
 
 const topBarImage = useTemplateRef("topBarImage");
 const bottomBarImage = useTemplateRef("bottomBarImage");
+const bottomBarOkImage = useTemplateRef("bottomBarOkImage");
 
 useRender((ctx) => {
-  if (!topBarImage.value || !bottomBarImage.value) return;
+  if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
+    return;
 
   ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
 
+  // top bar
   ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
-  ctx.drawImage(
-    bottomBarImage.value,
-    0,
-    store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24,
-  );
+
+  // bottom bar
+  ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
+  ctx.drawImage(bottomBarImage.value, 0, 0);
+
+  ctx.drawImage(bottomBarOkImage.value, 144, 4);
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
 });
 </script>
 
@@ -29,4 +40,9 @@ useRender((ctx) => {
     src="/assets/images/contact/bottom-screen/bottom-bar.png"
     hidden
   />
+  <img
+    ref="bottomBarOkImage"
+    src="/assets/images/contact/bottom-screen/ok-button.png"
+    hidden
+  />
 </template>

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -6,7 +6,17 @@ import Bars from "./Bars.vue";
 
 const store = useContactStore();
 
-const { selectorPosition } = useButtonNavigation({
+const ACTIONS = {
+  github: ["Open", "Github profile", "https://github.com/pihkaal"],
+  email: ["Copy", "Email", "hello@pihkaal.me"],
+  website: ["Copy", "Website link", "https://pihkaal.me"],
+  cv: ["Open", "CV", "https://pihkaal.me/cv"],
+} as const satisfies Record<
+  string,
+  [action: "Copy" | "Open", verb: string, content: string]
+>;
+
+const { selectedButton, selectorPosition } = useButtonNavigation({
   buttons: {
     github: [26, 27, 202, 42],
     email: [26, 59, 202, 42],
@@ -30,8 +40,19 @@ const { selectorPosition } = useButtonNavigation({
     },
   },
   initialButton: "github",
-  onButtonClick: (buttonName) => {
-    console.log("Clicked on selected button:", buttonName);
+  onButtonClick: async (button) => {
+    const [action, verb, content] = ACTIONS[button];
+    if (action === "Copy") {
+      try {
+        await navigator.clipboard.writeText(content);
+        store.pushNotification(`${verb} copied to clipboard`);
+      } catch (error) {
+        console.error("Failed to copy to clipboard:", error);
+      }
+    } else {
+      await navigateTo(content, { open: { target: "_blank " } });
+      store.pushNotification(`${verb} opened`);
+    }
   },
 });
 </script>
@@ -45,5 +66,5 @@ const { selectorPosition } = useButtonNavigation({
     :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
   />
 
-  <Bars />
+  <Bars :ok-label="ACTIONS[selectedButton][0]" />
 </template>