feat: add ToggleAllCheckbox component

.gitignore

@@ -3,5 +3,4 @@ node_modules
 data/kronos.bolt
 bin
 *.sqlite
-.idea/
-.husky/
+.idea/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

ui/src/components/atoms/ToggleAllCheckbox/ToggleAllCheckbox.tsx

@@ -0,0 +1,53 @@
+import { Checkbox, CheckboxProps } from '@/components/chakra/checkbox.tsx';
+
+interface ToggleAllCheckboxProps extends CheckboxProps {
+  /**
+   * The array of the checked items.
+   */
+  checkedItems: unknown[];
+
+  /**
+   * The array that contains all the check-able items.
+   */
+  allItems: unknown[];
+
+  /**
+   * Callback triggered when the checkbox is pressed when all the items are checked.
+   */
+  onResetCheckedItems(): void;
+
+  /**
+   * Callback triggered when the checkbox is pressed and not all the items are checked.
+   */
+  onCheckAllItems(): void;
+}
+
+export default function ToggleAllCheckbox(props: ToggleAllCheckboxProps) {
+  const {
+    checkedItems,
+    allItems,
+    onCheckAllItems,
+    onResetCheckedItems,
+    ...rest
+  } = props;
+  const areAllChecked = checkedItems.length === allItems.length;
+  const indeterminate = checkedItems.length > 0 && !areAllChecked;
+
+  const handleCheck = () => {
+    if (areAllChecked) {
+      return onResetCheckedItems();
+    }
+
+    onCheckAllItems();
+  };
+
+  return (
+    <Checkbox
+      onCheckedChange={handleCheck}
+      checked={indeterminate ? 'indeterminate' : areAllChecked}
+      {...rest}
+    >
+      Select all schedules
+    </Checkbox>
+  );
+}

ui/src/components/molecules/ScheduleCardList/ScheduleCardList.tsx

@@ -8,6 +8,7 @@ import {
   Grid,
   GridItem,
   HStack,
+  VisuallyHidden,
 } from '@chakra-ui/react';
 import {
   ActionBarContent,
@@ -23,6 +24,7 @@ import ScheduleActionButton, {
   ScheduleAction,
 } from '@/components/atoms/ScheduleActionButton/ScheduleActionButton.tsx';
 import ScheduleDetail from '@/components/molecules/ScheduleDetail/ScheduleDetail.tsx';
+import ToggleAllCheckbox from '@/components/atoms/ToggleAllCheckbox/ToggleAllCheckbox.tsx';
 
 interface ScheduleCardListProps {
   schedules: Schedule[];
@@ -84,8 +86,19 @@ export default function ScheduleCardList(props: ScheduleCardListProps) {
             onValueChange={(schedules) => setCheckedSchedulesIds(schedules)}
           >
             <Fieldset.Legend textAlign="left" fontSize="sm" mb="2">
-              Schedules
+              <VisuallyHidden>Schedules</VisuallyHidden>
             </Fieldset.Legend>
+
+            <ToggleAllCheckbox
+              mb={3}
+              checkedItems={checkedSchedulesIds}
+              allItems={schedules}
+              onResetCheckedItems={() => setCheckedSchedulesIds([])}
+              onCheckAllItems={() =>
+                setCheckedSchedulesIds(schedules.map((s) => s.id))
+              }
+            />
+
             <Grid
               templateColumns={{
                 base: '1fr',

ui/src/components/organisms/ScheduleList.tsx

@@ -34,7 +34,8 @@ export default function ScheduleList() {
 
   const { state, dispatch } = useContext(AppContext);
   const noSchedules = !schedules.isFetching && !schedules.data?.length;
-  const isAnimationDisabled = state.animationStatus === 'played';
+  const isAnimationDisabled =
+    !noSchedules || state.animationStatus === 'played';
 
   const handleSeed = async () => {
     try {