* wip ui * pretty much fully new settings page * proper dark/light mode * slight style tweak for sidebar * add about
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useSettingsStore } from "../stores/settingsStore";
|
|
import { Settings, AudioDevice } from "../lib/types";
|
|
|
|
interface UseSettingsReturn {
|
|
// State
|
|
settings: Settings | null;
|
|
isLoading: boolean;
|
|
isUpdating: (key: string) => boolean;
|
|
audioDevices: AudioDevice[];
|
|
outputDevices: AudioDevice[];
|
|
audioFeedbackEnabled: boolean;
|
|
|
|
// Actions
|
|
updateSetting: <K extends keyof Settings>(
|
|
key: K,
|
|
value: Settings[K],
|
|
) => Promise<void>;
|
|
resetSetting: (key: keyof Settings) => Promise<void>;
|
|
refreshSettings: () => Promise<void>;
|
|
refreshAudioDevices: () => Promise<void>;
|
|
refreshOutputDevices: () => Promise<void>;
|
|
|
|
// Binding-specific actions
|
|
updateBinding: (id: string, binding: string) => Promise<void>;
|
|
resetBinding: (id: string) => Promise<void>;
|
|
|
|
// Convenience getters
|
|
getSetting: <K extends keyof Settings>(key: K) => Settings[K] | undefined;
|
|
}
|
|
|
|
export const useSettings = (): UseSettingsReturn => {
|
|
const store = useSettingsStore();
|
|
|
|
// Initialize on first mount
|
|
useEffect(() => {
|
|
if (store.isLoading) {
|
|
store.initialize();
|
|
}
|
|
}, [store.initialize, store.isLoading]);
|
|
|
|
return {
|
|
settings: store.settings,
|
|
isLoading: store.isLoading,
|
|
isUpdating: store.isUpdatingKey,
|
|
audioDevices: store.audioDevices,
|
|
outputDevices: store.outputDevices,
|
|
audioFeedbackEnabled: store.settings?.audio_feedback || false,
|
|
updateSetting: store.updateSetting,
|
|
resetSetting: store.resetSetting,
|
|
refreshSettings: store.refreshSettings,
|
|
refreshAudioDevices: store.refreshAudioDevices,
|
|
refreshOutputDevices: store.refreshOutputDevices,
|
|
updateBinding: store.updateBinding,
|
|
resetBinding: store.resetBinding,
|
|
getSetting: store.getSetting,
|
|
};
|
|
};
|