feat(quest): add elevated quest auto focus

Author: SugarF0x

src/views/Quests/Menu/AutoFocus.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Checkbox } from "@/components"
+import { useQuestsMenuStore } from "./store"
+import { storeToRefs } from "pinia"
+import { onBeforeMount, watch } from "vue"
+
+const questsMenuStore = useQuestsMenuStore()
+const { shouldAutoFocusLastIncompleteQuest, shouldElevateLastIncompleteQuest } = storeToRefs(questsMenuStore)
+
+onBeforeMount(() => {
+  const ul = document.querySelector<HTMLUListElement>("ul[role=list]")
+  if (!ul) return
+
+  ul.innerHTML = ul.innerHTML.replaceAll("<li", "<button")
+  ul.innerHTML = ul.innerHTML.replaceAll("</li", "</button")
+  Array.from(ul.children).forEach((child) => {
+    child.classList.add("button-text-left")
+  })
+})
+
+watch(
+  [shouldElevateLastIncompleteQuest, shouldAutoFocusLastIncompleteQuest],
+  ([shouldElevate, shouldFocus]) => {
+    if (!shouldElevate || !shouldFocus) return
+
+    /** let button transform kick in */
+    setTimeout(() => {
+      const quest = document.querySelector<HTMLButtonElement>("#latest")
+      if (!quest) return
+      quest.focus()
+    })
+  },
+  {
+    immediate: true,
+  }
+)
+</script>
+
+<template>
+  <Checkbox
+    :model-value="shouldElevateLastIncompleteQuest ? shouldAutoFocusLastIncompleteQuest : false"
+    @update:modelValue="shouldAutoFocusLastIncompleteQuest = $event"
+    :disabled="!shouldElevateLastIncompleteQuest"
+  >
+    <template #default> Autofocus last incomplete quest </template>
+    <template #subtitle> Just hit space/enter! </template>
+  </Checkbox>
+</template>
+
+<style lang="scss">
+.button-text-left {
+  text-align: left !important;
+}
+</style>

src/views/Quests/Menu/Incomplete.vue

@@ -17,6 +17,7 @@ onBeforeMount(() => {
   const children = Array.from(ul.children).reverse()
   for (const child of children) {
     if (child.querySelector("svg")) continue
+    child.id = "latest"
     lastIncompleteElement.value = child as HTMLLIElement
     break
   }

src/views/Quests/Menu/Menu.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Incomplete from "./Incomplete.vue"
+import AutoFocus from "./AutoFocus.vue"
 
 import { Controls } from "@/components"
 </script>
 
 <template>
   <Controls to=".text-center.rounded-lg.backdrop-blur-md" style="color: white">
     <Incomplete />
+    <AutoFocus />
   </Controls>
 </template>

src/views/Quests/Menu/store.ts

@@ -5,9 +5,11 @@ export const useQuestsMenuStore = defineStore(
   "questsMenu",
   () => {
     const shouldElevateLastIncompleteQuest = ref(false)
+    const shouldAutoFocusLastIncompleteQuest = ref(false)
 
     return {
       shouldElevateLastIncompleteQuest,
+      shouldAutoFocusLastIncompleteQuest,
     }
   },
   {