feat(common): implement buttons and confirmation modal

app/composables/useButtonNavigation.ts

@@ -20,12 +20,16 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
     }
   >;
 }) => {
+  const { state: modalState } = useConfirmationModal();
+
   const selectedButton = ref(initialButton);
   const selectorPosition = computed(() => buttons[selectedButton.value]!);
 
   const nextButton = ref<keyof T | undefined>();
 
   useScreenClick((x: number, y: number) => {
+    if (modalState.value.isOpen) return;
+
     for (const [buttonName, config] of Object.entries(buttons) as [
       keyof T,
       ButtonConfig,
@@ -52,6 +56,8 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   });
 
   useKeyDown((key) => {
+    if (modalState.value.isOpen) return;
+
     const currentButton = selectedButton.value as keyof T;
     const currentNav = navigation[currentButton];
 

app/composables/useConfirmationModal.ts

@@ -0,0 +1,93 @@
+import gsap from "gsap";
+
+const MODAL_MAX_Y_OFFSET = 106;
+const BUTTONS_MAX_Y_OFFSET = 20;
+const BUTTONS_TIME = 0.1;
+const MODAL_TIME = 0.225;
+
+const state = useState("confirmationModal", () =>
+  reactive({
+    isOpen: false,
+    text: "",
+    onConfirm: null as (() => void) | null,
+    offsetY: MODAL_MAX_Y_OFFSET,
+    buttonsYOffset: 0,
+    modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+    isVisible: false,
+    isClosing: false,
+  }),
+);
+
+const open = (text: string, onConfirm?: (() => void) | null) => {
+  gsap.killTweensOf(state.value);
+  state.value.text = text;
+  state.value.onConfirm = onConfirm || null;
+  state.value.isVisible = true;
+  state.value.isClosing = false;
+  state.value.isOpen = true;
+
+  gsap
+    .timeline()
+    // standard buttons down
+    .fromTo(
+      state.value,
+      { buttonsYOffset: 0 },
+      {
+        buttonsYOffset: BUTTONS_MAX_Y_OFFSET,
+        duration: BUTTONS_TIME,
+        ease: "none",
+      },
+    )
+    // modal up
+    .fromTo(
+      state.value,
+      { offsetY: MODAL_MAX_Y_OFFSET },
+      { offsetY: 0, duration: MODAL_TIME, ease: "none" },
+    )
+    // modal buttons up
+    .fromTo(
+      state.value,
+      { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
+      { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
+    );
+};
+
+const close = () => {
+  if (!state.value.isVisible || state.value.isClosing) return;
+
+  state.value.isClosing = true;
+
+  gsap
+    .timeline()
+    // modal buttons down
+    .to(state.value, {
+      modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+      duration: BUTTONS_TIME,
+      ease: "none",
+    })
+    // modal down
+    .to(state.value, {
+      offsetY: MODAL_MAX_Y_OFFSET,
+      duration: MODAL_TIME,
+      ease: "none",
+    })
+    // standard buttons up
+    .to(state.value, {
+      buttonsYOffset: 0,
+      duration: BUTTONS_TIME,
+      ease: "none",
+    })
+    .call(() => {
+      state.value.isVisible = false;
+      state.value.isClosing = false;
+      state.value.isOpen = false;
+      state.value.text = "";
+      state.value.onConfirm = null;
+    });
+};
+
+export const useConfirmationModal = () => ({
+  open,
+  close,
+  state: readonly(state),
+});