From 54ccb9846dde206fa89fc23dafa4cd527e53c7e5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:13:16 +1000
Subject: [PATCH] feat(ui): add canvas autosave checkbox

---
 .../CanvasSettingsAutoSaveCheckbox.tsx        | 20 +++++++++++++++++++
 .../Settings/CanvasSettingsPopover.tsx        |  2 ++
 2 files changed, 22 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx
new file mode 100644
index 0000000000..0dfcae290a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx
@@ -0,0 +1,20 @@
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { settingsAutoSaveToggled } from 'features/controlLayers/store/canvasV2Slice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsAutoSaveCheckbox = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const autoSave = useAppSelector((s) => s.canvasV2.settings.autoSave);
+  const onChange = useCallback(() => dispatch(settingsAutoSaveToggled()), [dispatch]);
+  return (
+    <FormControl w="full">
+      <FormLabel flexGrow={1}>{t('controlLayers.autoSave')}</FormLabel>
+      <Checkbox isChecked={autoSave} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasSettingsAutoSaveCheckbox.displayName = 'CanvasSettingsAutoSaveCheckbox';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
index c0c91ba936..8ad4aeb22a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -9,6 +9,7 @@ import {
   PopoverTrigger,
   useShiftModifier,
 } from '@invoke-ai/ui-library';
+import { CanvasSettingsAutoSaveCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox';
 import { CanvasSettingsClearCachesButton } from 'features/controlLayers/components/Settings/CanvasSettingsClearCachesButton';
 import { CanvasSettingsClipToBboxCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsClipToBboxCheckbox';
 import { CanvasSettingsDynamicGridSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsDynamicGridSwitch';
@@ -30,6 +31,7 @@ export const CanvasSettingsPopover = memo(() => {
         <PopoverArrow />
         <PopoverBody>
           <Flex direction="column" gap={2}>
+            <CanvasSettingsAutoSaveCheckbox />
             <CanvasSettingsInvertScrollCheckbox />
             <CanvasSettingsClipToBboxCheckbox />
             <CanvasSettingsDynamicGridSwitch />