bugfix: lyric search excludeSources was not being sent/state issues

src/components/LyricSearch.jsx

@@ -44,13 +44,6 @@ export default function LyricSearch() {
               id="lyric-search-input"
               placeholder="Artist - Song"
               setShowLyrics={setShowLyrics} />
-    <br />
-    Exclude:<br />
-    <div id="exclude-checkboxes">
-    <UICheckbox id="excl-Genius" label="Genius" />
-    <UICheckbox id="excl-LRCLib" label="LRCLib" />
-    <UICheckbox id="excl-Cache" label="Cache" />
-    </div>
     <div id="spinner" className="hidden">
     <CircularProgress
     variant="plain"
@@ -86,13 +79,15 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
 
   // Toggle exclusion state for checkboxes
   const toggleExclusion = (source) => {
+    const lower = source.toLowerCase();
     setExcludedSources((prev) =>
-      prev.includes(source)
+      prev.includes(lower)
-        ? prev.filter((s) => s !== source)
+        ? prev.filter((s) => s !== lower)
-        : [...prev, source]
+        : [...prev, lower]
     );
   };
 
+
   // Show scrollable dropdown panel with mouse wheel handling
   const handlePanelShow = () => {
     setTimeout(() => {
@@ -233,6 +228,13 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
       <Button onClick={handleSearch} className="btn">
         Search
       </Button>
+      <br />
+      Exclude:<br />
+      <div id="exclude-checkboxes">
+        <UICheckbox id="excl-Genius" label="Genius" onToggle={toggleExclusion} />
+        <UICheckbox id="excl-LRCLib" label="LRCLib" onToggle={toggleExclusion} />
+        <UICheckbox id="excl-Cache" label="Cache" onToggle={toggleExclusion} />
+      </div>
 
       {isLoading && (
         <div className="mt-3">
@@ -255,42 +257,47 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
 }
 
 
-export const UICheckbox = forwardRef(function UICheckbox(opts = {}, ref) {
+export const UICheckbox = forwardRef(function UICheckbox(props = {}, ref) {
   const [checked, setChecked] = useState(false);
-  const [showAlert, setShowAlert] = useState(false);
+
-  let valid_exclusions = true;
   useImperativeHandle(ref, () => ({
     setChecked: (val) => setChecked(val),
     checked,
   }));
 
-  const verifyExclusions = (e) => {
+  const verifyExclusions = () => {
-    let exclude_error = false;
+    const checkedCount = $("#exclude-checkboxes input:checkbox:checked").length;
-    if (($("#exclude-checkboxes").find("input:checkbox").filter(":checked").length == 3)){
+    if (checkedCount === 3) {
-      $("#exclude-checkboxes").find("input:checkbox").each(function () {
+      $("#exclude-checkboxes input:checkbox").each(function () {
-        exclude_error = true;
         this.click();
       });
-      if (exclude_error) {
+      toast.error(
-        toast.error("All sources were excluded; exclusions have been reset.",
+        "All sources were excluded; exclusions have been reset.",
-          { style: { backgroundColor: "rgba(255, 0, 0, 0.5)", color: 'inherit' } },
+        { style: { backgroundColor: "rgba(255, 0, 0, 0.5)", color: "inherit" } }
-        );
+      );
-      }
     }
   };
+
+  const handleChange = (e) => {
+    const newChecked = e.target.checked;
+    setChecked(newChecked);
+    if (props.onToggle) {
+      const source = props.label; // Use label as source identifier
+      props.onToggle(source);
+    }
+    verifyExclusions();
+  };
+
   return (
     <div>
-    <Checkbox
+      <Checkbox
-    id={opts.id}
+        id={props.id}
-    key={opts.label}
+        key={props.label}
-    checked={checked}
+        checked={checked}
-    label={opts.label}
+        label={props.label}
-    style={{ color: "inherit" }}
+        style={{ color: "inherit" }}
-    onChange={(e) => {
+        onChange={handleChange}
-      setChecked(e.target.checked);
+      />
-      verifyExclusions();
-    }}
-    />
     </div>
   );
 });