feat: Drop zone for save files

package.json

@@ -20,6 +20,7 @@
     "@etothepii/satisfactory-file-parser": "^2.0.1",
     "@mantine/colors-generator": "^7.13.4",
     "@mantine/core": "7.13.4",
+    "@mantine/dropzone": "^7.13.4",
     "@mantine/hooks": "7.13.4",
     "@mantine/modals": "^7.13.4",
     "@mantine/notifications": "^7.13.4",
@@ -92,4 +93,4 @@
     "vitest": "^2.1.4"
   },
   "packageManager": "npm@10.8.3"
-}
+}

src/App.tsx

@@ -1,5 +1,6 @@
 import { Center, Loader, MantineProvider, Modal } from '@mantine/core';
 import '@mantine/core/styles.css';
+import '@mantine/dropzone/styles.css';
 import { Notifications } from '@mantine/notifications';
 import '@mantine/notifications/styles.css';
 

src/recipes/savegame/ImportSavegameRecipesModal.tsx

@@ -2,13 +2,15 @@ import {
   Button,
   Checkbox,
   Divider,
-  FileButton,
+  Group,
   Modal,
   Progress,
   Stack,
   Text,
+  ThemeIcon,
   Tooltip,
 } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconCloudUpload } from '@tabler/icons-react';
@@ -83,26 +85,36 @@ export function ImportSavegameRecipesModal(props: IImportSavegameModalProps) {
             description="If checked, imported recipes will be set as default for this game: new factories will have these recipes selected by default"
           />
 
-          <FileButton
-            onChange={file => {
-              if (!file) {
-                return;
-              }
+          <Dropzone
+            onDrop={files => {
+              if (!files[0]) return;
 
-              handleImport(file);
+              handleImport(files[0]);
+            }}
+            multiple={false}
+            loading={importing}
+            style={{
+              borderColor: 'var(--mantine-color-satisfactory-orange-5)',
+            }}
+            validator={file => {
+              if (file.name && file.name.split('.').pop() === 'sav') {
+                return null;
+              }
+              return {
+                code: 'invalid-file-type',
+                message: 'Only accepts Satisfactory .sav files',
+              };
             }}
-            accept=".sav"
           >
-            {props => (
-              <Button
-                {...props}
-                leftSection={<IconCloudUpload size={16} />}
-                loading={importing}
-              >
-                Select Savegame
-              </Button>
-            )}
-          </FileButton>
+            <Group justify="center" gap="md">
+              <ThemeIcon variant="transparent" c="satisfactory-orange">
+                <IconCloudUpload size={20} />
+              </ThemeIcon>
+              <Text size="md" c="satisfactory-orange">
+                Click to upload or drag a save file here
+              </Text>
+            </Group>
+          </Dropzone>
 
           {importing && (
             <>