feat(contact): notifications system + action

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>