feat(market): add first item autofocus

Author: SugarF0x

src/components/Controls.vue

@@ -14,6 +14,6 @@ defineProps<{
 
 <style lang="scss" scoped>
 .controls {
-  margin-top: 1rem;
+  margin: 1rem 0;
 }
 </style>

src/views/Market/Autofocus.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Checkbox } from "@/components"
+import { useMarketStore } from "./store"
+import { storeToRefs } from "pinia"
+import { watchEffect } from "vue"
+import { useSwalObserver } from "@/hooks"
+
+const { shouldAutoFocusFirstItem } = storeToRefs(useMarketStore())
+
+function selectFirstButton() {
+  const firstButton = document.querySelector<HTMLButtonElement>("tbody button")
+  firstButton?.focus()
+}
+
+useSwalObserver({
+  toggle: shouldAutoFocusFirstItem,
+  onReject(el) {
+    if (el.innerText.includes("sold")) window.location.reload()
+  },
+  onClose() {
+    selectFirstButton()
+  },
+})
+
+watchEffect(() => {
+  if (shouldAutoFocusFirstItem.value) selectFirstButton()
+})
+</script>
+
+<template>
+  <Checkbox v-model="shouldAutoFocusFirstItem">
+    <template #default> Autofocus first item </template>
+    <template #subtitle> Press space them bulk purchases </template>
+  </Checkbox>
+</template>

src/views/Market/_Market.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Autofocus from "./Autofocus.vue"
 import { Controls } from "@/components"
 import { onBeforeMount } from "vue"
 
@@ -17,6 +18,6 @@ onBeforeMount(() => {
 
 <template>
   <Controls :to="`#${marketControlsId}`">
-    <div style="color: white">web-app-container</div>
+    <Autofocus />
   </Controls>
 </template>

src/views/Market/store.ts

@@ -1,9 +1,14 @@
 import { defineStore } from "pinia"
+import { ref } from "vue"
 
 export const useMarketStore = defineStore(
   "market",
   () => {
-    return {}
+    const shouldAutoFocusFirstItem = ref(false)
+
+    return {
+      shouldAutoFocusFirstItem,
+    }
   },
   {
     persist: true,