diff --git a/renderer/src/ui/settings/components/search.jsx b/renderer/src/ui/settings/components/search.jsx
index 1bd481c8..1f8b504f 100644
--- a/renderer/src/ui/settings/components/search.jsx
+++ b/renderer/src/ui/settings/components/search.jsx
@@ -1,20 +1,34 @@
import React from "@modules/react";
+import Close from "@ui/icons/close";
import SearchIcon from "@ui/icons/search";
-const {useState, useCallback} = React;
+const {useState, useEffect, useCallback, useRef} = React;
export default function Search({onChange, className, onKeyDown, placeholder}) {
+ const input = useRef(null);
const [value, setValue] = useState("");
+
+ // focus search bar on page select
+ useEffect(()=>{
+ if (!input.current) return;
+ input.current.focus();
+ }, []);
+
const change = useCallback((e) => {
onChange?.(e);
setValue(e.target.value);
}, [onChange]);
+ const reset = useCallback(() => {
+ onChange?.({target: {value: ""}});
+ setValue("");
+ }, [onChange]);
return
-
-
+
+ {!value && }
+ {value && }
;
}
\ No newline at end of file
diff --git a/renderer/src/ui/settings/components/switch.jsx b/renderer/src/ui/settings/components/switch.jsx
index d72099a0..398a6ae9 100644
--- a/renderer/src/ui/settings/components/switch.jsx
+++ b/renderer/src/ui/settings/components/switch.jsx
@@ -3,17 +3,18 @@ import React from "@modules/react";
const {useState, useCallback} = React;
-export default function Switch({id, checked: initialValue, disabled, onChange}) {
+export default function Switch({id, checked: initialValue, disabled, onChange, internalState = true}) {
const [checked, setChecked] = useState(initialValue);
const change = useCallback(() => {
onChange?.(!checked);
setChecked(!checked);
}, [checked, onChange]);
+ const isChecked = internalState ? checked : initialValue;
const enabledClass = disabled ? " bd-switch-disabled" : "";
- const checkedClass = checked ? " bd-switch-checked" : "";
+ const checkedClass = isChecked ? " bd-switch-checked" : "";
return
-
+