feat: use howler

src/routes/-/RootLayout/components/Header/components/Settings/Settings.tsx

@@ -13,10 +13,10 @@ const TransactionsHistoryModal = lazy(() => import("./components/TransactionsHis
 const LanguageModal = lazy(() => import("./components/LanguageModal"));
 
 import classes from "./Settings.module.css";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 
 export default function Settings() {
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   const [state, send] = useMachine(settingsMachine);
 

src/routes/-/RootLayout/components/Header/components/Settings/components/LanguageModal/LanguageModal.tsx

@@ -5,7 +5,7 @@ import Modal from "@components/modals/Modal";
 import ContentSurface from "@components/surface/ContentSurface";
 import DarkSurface from "@components/surface/DarkSurface";
 import { useLanguages } from "@/i18n/useLanguages";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 import tg from "@/tg";
 
 import classes from "./LanguageModal.module.css";
@@ -21,7 +21,7 @@ type Props = {
 export default function LanguageModal({ open, onClose, onBack }: Props) {
   const { t } = useTranslation();
   const { languages, current, setLanguage } = useLanguages();
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
 
   const handleSelect = (key: string) => {
     play("click");

src/routes/-/RootLayout/components/Header/components/Settings/components/SettingsModal/SettingsModal.tsx

@@ -5,7 +5,7 @@ import Modal from "@components/modals/Modal";
 import ContentSurface from "@components/surface/ContentSurface";
 import LightSurface from "@components/surface/LightSurface";
 import SwitchInput from "@components/form/SwitchInput";
-import { useAudioSettings, usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 import tg from "@/tg";
 
 import classes from "./SettingsModal.module.css";
@@ -23,8 +23,7 @@ type Props = {
 export default function SettingsModal({ open, onClose, onNavigate, liftIds }: Props) {
   const { t } = useTranslation();
   const { current } = useLanguages();
-  const { isEnabled, setIsEnabled } = useAudioSettings();
-  const play = usePlaySound();
+  const { isEnabled, setIsEnabled, play } = useAudioStore();
 
   const handleNavigate = (modal: SettingsModalId) => {
     play("click");

src/routes/-/RootLayout/components/Navigation/Navigation.tsx

@@ -23,7 +23,7 @@ import rouletteIcon from "./assets/roulette.svg";
 import tasksIcon from "./assets/tasks.svg";
 import earningsIcon from "./assets/earnings.svg";
 import tg, { useTelegramViewportValue } from "@/tg";
-import { usePlaySound } from "@/audio";
+import { useAudioStore } from "@/audio";
 
 const ANIMATION_DURATION = 0.2;
 const SPRING_ANIMATION = {
@@ -193,7 +193,7 @@ function MenuBar({ labelKey, icon, delay, active, onClick }: MenuBarProps) {
 }
 
 export default function Navigation() {
-  const play = usePlaySound();
+  const play = useAudioStore((s) => s.play);
   const matchRoute = useMatchRoute();
   const navigate = useNavigate();
   const [menuOpen, setMenuOpen] = useState<number>(0);