Rewrite MenuButton component in TS

package.json

@@ -11,6 +11,7 @@
 		"@babel/eslint-parser": "^7.23.10",
 		"@bakaso/fkclient": "^1.6.1",
 		"@types/node": "^20.11.16",
+		"@types/webpack-env": "^1.18.4",
 		"@vue/cli-plugin-babel": "^5.0.8",
 		"@vue/cli-plugin-eslint": "^5.0.8",
 		"@vue/cli-plugin-pwa": "^5.0.8",

src/components/misc/MenuButton.vue

@@ -1,16 +1,16 @@
 <template>
-	<button @click="dispatchEvent">
+	<button @click="dispatchEvent" :class="$style.root">
 		<img class="icon" :src="src" />
 	</button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 	import { computed } from "vue"
 	import { useRoute, useRouter } from "vue-router"
-	import { useScroll } from "@/hooks/scroll"
+	import { useScroll } from "@/hooks"
 	import { useStore } from "vuex"
 
-	const props = defineProps({ icon: String })
+	const props = defineProps<{ icon: string }>()
 	const store = useStore()
 	const route = useRoute()
 	const router = useRouter()
@@ -20,15 +20,15 @@
 	const src = computed(() => images(`./${props.icon}.svg`))
 
 	function dispatchEvent() {
+		const boardName = Array.isArray(route.params.boardName) ? route.params.boardName[0] : route.params.boardName || undefined
+		const threadId = parseInt(Array.isArray(route.params.threadId) ? route.params.threadId[0] : route.params.threadId) || undefined
+
 		switch (props.icon) {
 			case "chat":
 				return window.emitter.emit("menu-chat-button-click", {
-					boardName: route.params.boardName,
-					threadId: parseInt(route.params.threadId),
-					threadNumber:
-						route.name === "thread"
-							? store.state.threads[parseInt(route.params.threadId)].head.number
-							: null,
+					boardName,
+					threadId,
+					threadNumber: route.name === "thread" && threadId ? store.state.threads[threadId].head.number : undefined,
 				})
 
 			case "star":
@@ -49,14 +49,14 @@
 	}
 </script>
 
-<style scoped>
-	button {
-		height: 3.5rem;
-		width: 3.5rem;
-		justify-content: center;
+<style module>
+	.root {
 		align-items: center;
-		display: flex;
 		background-color: var(--card-color);
 		border: none;
+		display: flex;
+		height: 3.5rem;
+		justify-content: center;
+		width: 3.5rem;
 	}
 </style>

src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { default as useAPIHandlers } from "@/hooks/useAPIHandlers"
 export * from "@/hooks/authHandler"
 export * from "@/hooks/postLinkEventHandler"
+export * from "@/hooks/scroll"
 export * from "@/hooks/theme"