feat: use howler

src/components/atoms/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { motion, type HTMLMotionProps } from "motion/react";
 import clsx, { type ClassValue } from "clsx";
 
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 import tg from "@/tg";
 
 import classes from "./Button.module.css";
@@ -19,7 +19,7 @@ const VARIANTS_MAP = {
 } satisfies Record<Exclude<Props["variant"], undefined>, string>;
 
 export default function Button({ className, variant = "blue", onClick, ...props }: Props) {
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   return (
     <motion.button

src/components/atoms/Pagination/Pagination.tsx

@@ -10,7 +10,7 @@ import LightSurface from "@components/surface/LightSurface";
 import BackIcon from "./icons/BackIcon";
 import StartIcon from "./icons/StartIcon";
 import classes from "./Pagination.module.css";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 
 type Props = {
   value: number;
@@ -21,7 +21,7 @@ type Props = {
 
 export default function Pagination({ value, total, onChange, variant = "default" }: Props) {
   const { t } = useTranslation();
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   const isAtStart = value <= 1 || total <= 1;
   const isAtEnd = value >= total || total <= 1;

src/components/atoms/TabSelector/TabSelector.tsx

@@ -4,7 +4,7 @@ import DarkSurface from "@components/surface/DarkSurface";
 import { motion, type HTMLMotionProps } from "motion/react";
 
 import classes from "./TabSelector.module.css";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 import tg from "@/tg";
 
 type Tab = {
@@ -20,7 +20,7 @@ type Props = Omit<HTMLMotionProps<"div">, "className" | "onChange"> & {
 };
 
 export default function TabSelector({ tabs, value, onChange, className, ...props }: Props) {
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   const selectedIndex = value != null ? tabs.findIndex((tab) => tab.key === value) : -1;
 

src/components/form/NumberInput/NumberInput.tsx

@@ -4,7 +4,7 @@ import { type ReactNode, useRef, useState, type ChangeEvent, useId } from "react
 import KeyboardIcon from "@components/icons/KeyboardIcon";
 
 import classes from "./NumberInput.module.css";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 import tg from "@/tg";
 
 type Props = Omit<HTMLMotionProps<"input">, "className" | "type" | "onChange"> & {
@@ -31,7 +31,7 @@ export default function NumberInput({
   onChange,
   ...props
 }: Props) {
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   const stableId = useId();
   const inputRef = useRef<HTMLInputElement>(null);