explorer/newFileWizard: add empty file option

Fixes: https://github.com/pybricks/pybricks-code/issues/771

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -1,10 +1,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { Button, Classes, Dialog, FormGroup } from '@blueprintjs/core';
+import { Button, Classes, Dialog, FormGroup, Switch } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
 import { useId } from 'react-aria';
 import { useDispatch } from 'react-redux';
+import { useLocalStorage } from 'usehooks-ts';
 import { HubPicker } from '../../components/hubPicker/HubPicker';
 import { useHubPickerSelectedHub } from '../../components/hubPicker/hooks';
 import { useFileStorageMetadata } from '../../fileStorage/hooks';
@@ -22,6 +23,10 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 
+    const [emptyFile, setEmptyFile] = useLocalStorage(
+        'explorer.newFileWizard.emptyFile',
+        false,
+    );
     const isOpen = useSelector((s) => s.explorer.newFileWizard.isOpen);
     const [fileName, setFileName] = useState('');
     const files = useFileStorageMetadata() ?? [];
@@ -37,9 +42,15 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
     const handleSubmit = useCallback<React.FormEventHandler>(
         (e) => {
             e.preventDefault();
-            dispatch(newFileWizardDidAccept(fileName, pythonFileExtension, hubType));
+            dispatch(
+                newFileWizardDidAccept(
+                    fileName,
+                    pythonFileExtension,
+                    emptyFile ? undefined : hubType,
+                ),
+            );
         },
-        [dispatch, fileName, pythonFileExtension, hubType],
+        [dispatch, fileName, pythonFileExtension, hubType, emptyFile],
     );
 
     const handleClose = useCallback(() => {
@@ -66,9 +77,20 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
                         inputRef={fileNameInputRef}
                         onChange={setFileName}
                     />
-                    <FormGroup label={i18n.translate('smartHub.label')}>
-                        <HubPicker />
+                    <FormGroup
+                        label={i18n.translate('template.label')}
+                        disabled={emptyFile}
+                    >
+                        <HubPicker disabled={emptyFile} />
                     </FormGroup>
+                    <Switch
+                        checked={emptyFile}
+                        onChange={(e) =>
+                            setEmptyFile((e.target as HTMLInputElement).checked)
+                        }
+                    >
+                        {i18n.translate('emptyFile.label')}
+                    </Switch>
                 </div>
                 <div className={Classes.DIALOG_FOOTER}>
                     <div className={Classes.DIALOG_FOOTER_ACTIONS}>

src/explorer/newFileWizard/actions.ts

@@ -20,10 +20,14 @@ export const newFileWizardShow = createAction(() => ({
  * Indicates that the use accepted the new file wizard dialog.
  * @param fileName The user-provided file name.
  * @param fileExtension The user-provided file extension.
- * @param hubType The user-provided hub type.
+ * @param hubType The user-provided hub type or undefined for an empty file.
  */
 export const newFileWizardDidAccept = createAction(
-    (fileName: string, fileExtension: SupportedFileExtension, hubType: Hub) => ({
+    (
+        fileName: string,
+        fileExtension: SupportedFileExtension,
+        hubType: Hub | undefined,
+    ) => ({
         type: 'explorer.newFileWizard.action.didAccept',
         fileName,
         fileExtension,

src/explorer/newFileWizard/translations/en.json

@@ -1,7 +1,10 @@
 {
     "title": "Create a new file",
-    "smartHub": {
-        "label": "Smart hub"
+    "template": {
+        "label": "Template"
+    },
+    "emptyFile": {
+        "label": "Create an empty file"
     },
     "action": {
         "create": "Create"