fix: Resolve select all checkbox bug and progress bar display issues

- Changed checkbox event handlers from onClick to onChange for proper React behavior
- Simplified disabled condition to check only percentage < 100
- Fixed progress bar calculation using Math.round instead of Math.floor to reach 100%
- Fixed progress bar positioning with explicit left:0 and top:0 to eliminate visual gap
- Improved "Select all on this page" checkbox logic to properly validate page users

Fixes the bug where select all checkboxes were not responding to user clicks
and progress bar was stuck at 99% instead of reaching 100% completion.

Author: Kl4rkx

public/index.html

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useState } from "react";
 import { State } from "../model/state";
-import { assertUnreachable, copyListToClipboard, getUsersForDisplay } from "../utils/utils";
+import { assertUnreachable, copyListToClipboard, getCurrentPageUnfollowers, getUsersForDisplay } from "../utils/utils";
 import { SettingMenu } from "./SettingMenu";
 import { SettingIcon } from "./icons/SettingIcon";
 import { Timings } from "../model/timings";
@@ -10,7 +10,6 @@ interface ToolBarProps {
   isActiveProcess: boolean;
   state: State;
   setState: (state: State) => void;
-  scanningPaused: boolean;
   toggleAllUsers: (e: ChangeEvent<HTMLInputElement>) => void;
   toggleCurrentePageUsers: (e: ChangeEvent<HTMLInputElement>) => void;
   currentTimings: Timings;
@@ -21,7 +20,6 @@ export const Toolbar = ({
   isActiveProcess,
   state,
   setState,
-  scanningPaused,
   toggleAllUsers,
   toggleCurrentePageUsers,
   currentTimings,
@@ -127,22 +125,20 @@ export const Toolbar = ({
             type="checkbox"
             // Avoid allowing to select all before scan completed to avoid confusion
             // regarding what exactly is selected while scanning in progress.
-            disabled={
-              // if paused, allow to select all even if scan is not completed.
-              state.percentage < 100 && !scanningPaused
-            }
+            disabled={state.percentage < 100}
             checked={
-              state.selectedResults.length ===
-              getUsersForDisplay(
-                state.results,
-                state.whitelistedResults,
-                state.currentTab,
-                state.searchTerm,
-                state.filter,
-              ).length
+              (() => {
+                const displayed = getUsersForDisplay(state.results, state.whitelistedResults, state.currentTab, state.searchTerm, state.filter);
+                const pageUsers = getCurrentPageUnfollowers(displayed, state.page);
+                // Fix: Check if pageUsers is not empty and all are selected
+                // Previous logic didn't account for empty page or partial selections correctly
+                return pageUsers.length > 0 && pageUsers.every(u => state.selectedResults.some(s => s.id === u.id));
+              })()
             }
             className="toggle-all-checkbox"
-            onClick={toggleCurrentePageUsers}
+            // Fix: Changed from onClick to onChange for proper React checkbox handling
+            // onClick doesn't trigger reliably for controlled checkboxes
+            onChange={toggleCurrentePageUsers}
           />
         )}
         {state.status === "scanning" && (
@@ -151,10 +147,7 @@ export const Toolbar = ({
             type="checkbox"
             // Avoid allowing to select all before scan completed to avoid confusion
             // regarding what exactly is selected while scanning in progress.
-            disabled={
-              // if paused, allow to select all even if scan is not completed.
-              state.percentage < 100 && !scanningPaused
-            }
+            disabled={state.percentage < 100}
             checked={
               state.selectedResults.length ===
               getUsersForDisplay(
@@ -166,7 +159,9 @@ export const Toolbar = ({
               ).length
             }
             className="toggle-all-checkbox"
-            onClick={toggleAllUsers}
+            // Fix: Changed from onClick to onChange for proper React checkbox handling
+            // onClick doesn't trigger reliably for controlled checkboxes
+            onChange={toggleAllUsers}
           />
         )}
       </div>

src/components/Toolbar.tsx

@@ -257,7 +257,9 @@ function App() {
           }
           const newState: State = {
             ...prevState,
-            percentage: Math.floor((currentFollowedUsersCount / totalFollowedUsersCount) * 100),
+            // Fix: Changed from Math.floor to Math.round to ensure progress reaches 100%
+            // Math.floor would leave progress at 99% when near completion
+            percentage: Math.round((currentFollowedUsersCount / totalFollowedUsersCount) * 100),
             results,
           };
           return newState;
@@ -299,7 +301,9 @@ function App() {
       let counter = 0;
       for (const user of state.selectedResults) {
         counter += 1;
-        const percentage = Math.floor((counter / state.selectedResults.length) * 100);
+        // Fix: Changed from Math.floor to Math.round to ensure progress reaches 100%
+        // Math.floor would leave progress at 99% when near completion
+        const percentage = Math.round((counter / state.selectedResults.length) * 100);
         try {
           await fetch(unfollowUserUrlGenerator(user.id), {
             headers: {
@@ -400,7 +404,6 @@ function App() {
         <Toolbar
           state={state}
           setState={setState}
-          scanningPaused={scanningPaused}
           isActiveProcess={isActiveProcess}
           toggleAllUsers={toggleAllUsers}
           toggleCurrentePageUsers={toggleCurrentePageUsers}

src/main.tsx

@@ -154,6 +154,10 @@ html {
             width: 100%;
             height: 8px;
             position: absolute;
+            // Fix: Added explicit positioning to prevent white gap at the end
+            // Without left: 0 and top: 0, the progress bar doesn't fully align
+            left: 0;
+            top: 0;
         }
 
         .results-container,