feat(nds): add pressed state for all buttons

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -1,106 +1,14 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Buttons from "./Buttons.vue";
-import ButtonSelector from "~/components/Common/ButtonSelector.vue";
-import { promiseTimeout } from "@vueuse/core";
 
 const store = useContactStore();
-const achievements = useAchievementsStore();
-const confirmationModal = useConfirmationModal();
-
-const ACTIONS = {
-  github: [
-    "open",
-    "contact.actions.githubProfile",
-    "https://github.com/pihkaal",
-  ],
-  email: ["copy", "contact.actions.email", "hello@pihkaal.me"],
-  website: ["copy", "contact.actions.websiteLink", "https://pihkaal.me"],
-  cv: ["open", "contact.actions.cv", "https://pihkaal.me/cv"],
-} as const satisfies Record<
-  string,
-  [action: "copy" | "open", verbKey: string, content: string]
->;
-
-const { selected, selectorPosition } = useButtonNavigation({
-  buttons: {
-    github: [26, 27, 202, 42],
-    email: [26, 59, 202, 42],
-    website: [26, 91, 202, 42],
-    cv: [26, 123, 202, 42],
-  },
-  navigation: {
-    github: {
-      down: "email",
-    },
-    email: {
-      up: "github",
-      down: "website",
-    },
-    website: {
-      up: "email",
-      down: "cv",
-    },
-    cv: {
-      up: "website",
-    },
-  },
-  initialButton: "github",
-  onActivate: (button) => {
-    actionateButton(button);
-  },
-  disabled: computed(() => store.isIntro || store.isOutro),
-  selectorAnimation: {
-    duration: 0.075,
-    ease: "none",
-  },
-});
-
-const handleActivateB = () => {
-  if (store.isIntro || store.isOutro) return;
-  store.animateOutro();
-};
-
-const actionateButton = async (button: (typeof selected)["value"]) => {
-  const [action, verbKey, content] = ACTIONS[button];
-  const verb = $t(verbKey);
-  if (action === "copy") {
-    try {
-      await navigator.clipboard.writeText(content);
-      store.pushNotification($t("contact.copiedToClipboard", { item: verb }));
-    } catch (error) {
-      console.error("Failed to copy to clipboard:", error);
-    }
-  } else {
-    const url = content.replace(/^https?:\/\//, "");
-    confirmationModal.open({
-      text: $t("contact.openUrl", { url }),
-      onActivateA: async () => {
-        store.pushNotification($t("contact.opened", { item: verb }));
-        await promiseTimeout(100);
-        await navigateTo(content, { open: { target: "_blank " } });
-
-        await promiseTimeout(500);
-
-        if (button === "github") {
-          achievements.unlock("contact_git_visit");
-        }
-      },
-    });
-  }
-};
 </script>
 
 <template>
   <Background />
 
   <Buttons />
-  <ButtonSelector
-    :rect="selectorPosition"
-    :opacity="
-      store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
-    "
-  />
 
   <CommonBars
     :title="$t('contact.title')"
@@ -109,20 +17,4 @@ const actionateButton = async (button: (typeof selected)["value"]) => {
     "
     :y-offset="store.isIntro ? store.intro.barOffsetY : 0"
   />
-  <CommonConfirmationModal />
-  <CommonButtons
-    :y-offset="
-      store.isIntro ? store.intro.barOffsetY : confirmationModal.buttonsYOffset
-    "
-    :opacity="
-      store.isIntro
-        ? store.intro.stage3Opacity
-        : store.isOutro
-          ? store.outro.stage2Opacity
-          : 1
-    "
-    :b-label="$t('common.quit')"
-    :a-label="$t(`contact.actions.${ACTIONS[selected][0]}`)"
-    @activate-b="handleActivateB"
-  />
 </template>