Fix tools filter checkbox state persistence on refresh

pages/tools/components/Sidebar.tsx

@@ -43,8 +43,9 @@ export default function Sidebar({
   setIsSidebarOpen,
 }: SidebarProps) {
   const filterFormRef = useRef<HTMLFormElement>(null);
-  const [pendingSelections, setPendingSelections] =
-    useState<Transform>(transform);
+  const [pendingSelections, setPendingSelections] = useState<Transform>(
+    () => transform,
+  );
 
   // Sync pendingSelections with transform when transform changes
   useEffect(() => {
@@ -155,26 +156,28 @@ export default function Sidebar({
           label='Show obsolete'
           value='showObsolete'
           name='showObsolete'
-          checked={pendingSelections['showObsolete'] === 'true'}
+          checked={pendingSelections.showObsolete === 'true'}
           onChange={(checked) =>
             setPendingSelections((prev) => ({
               ...prev,
               showObsolete: checked ? 'true' : 'false',
             }))
           }
         />
+
         <Checkbox
           label='Support Bowtie'
           value='supportsBowtie'
           name='supportsBowtie'
-          checked={pendingSelections['supportsBowtie'] === 'true'}
+          checked={pendingSelections.supportsBowtie === 'true'}
           onChange={(checked) =>
             setPendingSelections((prev) => ({
               ...prev,
               supportsBowtie: checked ? 'true' : 'false',
             }))
           }
         />
+
         <div className='w-full flex items-center justify-between mt-4 gap-2'>
           <Button
             type='submit'

pages/tools/components/ui/Checkbox.tsx

@@ -21,7 +21,7 @@ export default function Checkbox({
       <ShadcnCheckbox
         value={value}
         name={name}
-        defaultChecked={checked}
+        checked={checked}
         disabled={disabled}
         onCheckedChange={onChange}
         className='h-5 w-5 border data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-[state=checked]:text-white dark:data-[state=checked]:bg-[#bfdbfe] dark:data-[state=checked]:border-[#bfdbfe] dark:data-[state=checked]:text-black border-gray-500 dark:border-slate-600'

pages/tools/hooks/useToolsTransform.tsx

@@ -90,10 +90,8 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
       environments: parseArrayParam(
         query.environments,
       ) as Transform['environments'],
-      showObsolete:
-        (query.showObsolete as Transform['showObsolete']) || 'false',
-      supportsBowtie:
-        (query.supportsBowtie as Transform['supportsBowtie']) || 'false',
+      showObsolete: query.showObsolete === 'true' ? 'true' : 'false',
+      supportsBowtie: query.supportsBowtie === 'true' ? 'true' : 'false',
     } satisfies Transform;
 
     const queryString = buildQueryString(updatedTransform);