feat: Implemented audio effects

src/mainview/components/options/Button.tsx

@@ -7,6 +7,7 @@ import
 import classNames from "classnames";
 import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
 import { CSSProperties } from "react";
+import { oneShot } from "@/mainview/scripts/audio/audio";
 
 export type ButtonStyle = 'base' | 'accent' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
 
@@ -35,9 +36,14 @@ export function Button (data: {
     tooltipType?: "base" | "accent" | "error";
 } & InteractParams & FocusParams)
 {
+    const handleAction = (e?: any) =>
+    {
+        data.onAction?.(e);
+        oneShot('click');
+    };
     const { ref, focused, focusKey } = useFocusable({
         focusKey: data.id,
-        onEnterPress: data.onAction,
+        onEnterPress: () => handleAction(),
         onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details),
         focusable: !data.disabled
     });
@@ -49,7 +55,7 @@ export function Button (data: {
 
     return <button
         ref={ref}
-        onClick={e => data.onAction?.(e.nativeEvent)}
+        onClick={handleAction}
         disabled={data.disabled}
         data-tooltip={data.tooltip}
         data-tooltip_type={data.tooltipType}

src/mainview/components/options/OptionDropdown.tsx

@@ -4,6 +4,7 @@ import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { ContextDialog, ContextList, DialogEntry } from "../ContextDialog";
 import { ChevronDown } from "lucide-react";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";
+import { oneShot } from "@/mainview/scripts/audio/audio";
 
 export function OptionDropdown (data: {
     name: string;
@@ -23,6 +24,7 @@ export function OptionDropdown (data: {
     const handlePress = () =>
     {
         setOpen(true);
+        oneShot('click');
     };
     const handleClose = () => setOpen(false);
     const { ref } = useFocusable({
@@ -33,11 +35,7 @@ export function OptionDropdown (data: {
         <>
             <label ref={ref} className={twMerge("flex group-focusable items-center gap-3 rounded-full sm:flex-2 md:flex-1 divide-accent")}>
                 {!!data.icon && <span className={"text-base-content/80 is-focused:text-primary-content"}>{data.icon}</span>}
-                <button onClick={() =>
-                {
-                    console.log("Open");
-                    setOpen(true);
-                }} className={'flex items-center justify-center border h-10 border-base-content/30 px-4 py-2 rounded-full cursor-pointer grow not-in-focused:bg-base-200 focusable focusable-accent hover:border-base-content hover:bg-base-content hover:text-base-300'}>{data.value}<ChevronDown /></button>
+                <button onClick={handlePress} className={'flex items-center justify-center border h-10 border-base-content/30 px-4 py-2 rounded-full cursor-pointer grow not-in-focused:bg-base-200 focusable focusable-accent hover:border-base-content hover:bg-base-content hover:text-base-300 active:bg-primary active:text-primary-content active:border-0'}>{data.value}<ChevronDown /></button>
             </label>
             {open && <ContextDialog id={`${data.name}-context`} preferredChildFocusKey={FOCUS_KEYS.CONTEXT_DIALOG_OPTION(`${data.name}-context`, String(data.values.indexOf(data.value ?? '')))} open={true} close={handleClose}>
                 <ContextList options={data.values.map((v, i) => ({

src/mainview/components/options/OptionInput.tsx

@@ -4,6 +4,7 @@ import { useOptionContext } from "./OptionSpace";
 import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { systemApi } from "../../scripts/clientApi";
 import { CheckIcon, X } from "lucide-react";
+import { oneShot } from "@/mainview/scripts/audio/audio";
 
 export function OptionInput (data: {
     name: string;
@@ -27,6 +28,7 @@ export function OptionInput (data: {
         {
             inputRef.current?.focus();
         }
+        oneShot('click');
     };
     const { ref } = useFocusable({
         focusKey: data.name, onEnterPress: handlePress
@@ -79,12 +81,14 @@ export function OptionInput (data: {
                     name={data.name}
                     checked={Boolean(data.value)}
                     type={data.type}
+                    onClick={() => { oneShot("click"); }}
                     autoComplete={data.autocomplete}
                     onFocus={handleFocus}
                     placeholder={data.placeholder}
                     onChange={e => data.onChange?.(e.target.checked)}
                     onBlur={data.onBlur}
                     className={twMerge(
+                        "active:bg-base-content rounded-full",
                         data.className
                     )}
                 />

src/mainview/components/options/PathSettingsOption.tsx

@@ -80,7 +80,7 @@ export function PathSettingsOptionBase (data: PathSettingsOptionParams & {
     const handleCloseSeatch = () =>
     {
         setIsBrowsing(false);
-        setFocus(`${data.id}-browse`);
+        setFocus(`${data.id}-browse`, { instant: true });
     };
 
     const handleInputBlur = () =>