Add UI for creating new file

frontend/src/App.svelte

@@ -29,6 +29,7 @@
   import GridSettingsModal from './components/GridSettingsModal.svelte';
   import ThemeSettingsModal from './components/ThemeSettingsModal.svelte';
   import BackgroundSettingsModal from './components/BackgroundSettingsModal.svelte';
+  import New from './sections/New.svelte';
   
   let theme: 'white'|'g10'|'g80'|'g90'|'g100' = 'g90'
   
@@ -80,6 +81,7 @@
   }
   
   let showImport: boolean = false
+  let showNew: boolean = false
   let importValid: boolean = false
   let importFile: data.StackistFileV1 = null
   let importFilepath: string = ''
@@ -142,9 +144,20 @@
     if (importValid) {
       files = [...files, new LoadedFile({filepath: importFilepath, title: importFilepath, canvas: importCanvas, data: importFile})]
       focusedFileIndex = files.length - 1
+      importCanvas = null
+      importFile = null
     }
     showImport = false
   }
+
+  function engageNew() {
+    files = [...files, new LoadedFile({filepath: "", title: 'Untitled', canvas: importCanvas, data: importFile})]
+    focusedFileIndex = files.length - 1
+    importCanvas = null
+    importFile = null
+
+    showNew = false
+  }
   
   function engageCopy() {
     if (!focusedFile) return
@@ -208,7 +221,7 @@
   <menu class="mainMenu">
     <OverflowMenu size="sm">
       <div slot="menu">File</div>
-      <OverflowMenuItem text="New"/>
+      <OverflowMenuItem text="New..." on:click={() => showNew = true}/>
       <OverflowMenuItem text="Open..."/>
       <OverflowMenuItem text="Import from PNG..." on:click={() => showImport = true}/>
       <OverflowMenuItem text="Save"/>
@@ -379,6 +392,9 @@
     bind:canvas={importCanvas}
   />
 </ComposedModal>
+<ComposedModal bind:open={showNew} size="sm" preventCloseOnClickOutside on:click:button--primary={engageNew}>
+  <New bind:open={showNew} bind:canvas={importCanvas} bind:file={importFile} />
+</ComposedModal>
 
 <style>
   main {

frontend/src/sections/New.svelte

@@ -0,0 +1,65 @@
+<script lang='ts'>
+  import { onMount } from 'svelte';
+  import { data } from '../../wailsjs/go/models.js'
+  import { Canvas } from '../types/canvas'
+
+  import {
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    NumberInput,
+    Checkbox,
+  } from "carbon-components-svelte"
+
+  let width: number = 64
+  let height: number = 64
+  let indexed: boolean = true
+  export let file: data.StackistFileV1
+  export let canvas: Canvas
+  export let open: boolean = false
+
+  $: {
+    canvas = new Canvas(width, height)
+    canvas.addNewPaletteColor(0, 0, 0, 0)
+  }
+  $: canvas.isIndexed = indexed
+  $: file = data.StackistFileV1.createFrom({
+    width: width,
+    height: height,
+    groups: {}
+  })
+
+  onMount(() => {
+    canvas = new Canvas(width, height)
+    canvas.addNewPaletteColor(0, 0, 0, 0)
+    canvas.isIndexed = indexed
+    file = data.StackistFileV1.createFrom({
+      width: width,
+      height: height,
+      groups: {}
+    })
+  })
+</script>
+
+<ModalHeader label="Create New File"/>
+<ModalBody>
+  <NumberInput
+    id="width"
+    label="Width"
+    min={1}
+    max={1024}
+    bind:value={width}/>
+  <NumberInput
+    id="height"
+    label="Height"
+    min={1}
+    max={1024}
+    bind:value={height}/>
+  <Checkbox labelText="Indexed" bind:checked={indexed}/>
+</ModalBody>
+<ModalFooter
+  primaryButtonText="Create"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary={() => open = false}
+/>
+