feat(contact): animate outro

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -41,20 +41,35 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   },
   initialButton: "github",
   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`);
-    }
+    actionateButton(button);
   },
 });
+
+const actionateButton = async (button: (typeof selectedButton)["value"]) => {
+  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`);
+  }
+};
+
+const QUIT_BUTTON: Rect = [31, 172, 80, 18];
+const OK_BUTTON: Rect = [144, 172, 80, 18];
+
+useScreenClick((x, y) => {
+  if (rectContains(QUIT_BUTTON, [x, y])) {
+    store.animateOutro();
+  } else if (rectContains(OK_BUTTON, [x, y])) {
+    actionateButton(selectedButton.value);
+  }
+});
 </script>
 
 <template>
@@ -63,7 +78,9 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   <Buttons />
   <ButtonSelector
     :rect="selectorPosition"
-    :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
+    :opacity="
+      store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
+    "
   />
 
   <Bars :ok-label="ACTIONS[selectedButton][0]" />