add 'reset ship' link

src/lib/components/Header.svelte

@@ -1,19 +1,22 @@
 <header>
   <h1>The Docks</h1>
   <h2>
-        a <a href="https://shop.groundzerogames.co.uk/rules.html"
-            >Full Thrust</a
-        > ship builder
+    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
+    builder
   </h2>
   <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
 </header>
 
-<div>
+<div class="menu">
   <Tabs bind:active={activeTab}>
     <Tab tabid="editor">editor</Tab>
     <Tab tabid="json">json view</Tab>
     <Tab tabid="print">print view</Tab>
   </Tabs>
+
+  <div class="actions">
+    <a on:click|preventDefault={resetShip}>reset ship</a>
+  </div>
 </div>
 
 <Modal bind:open={showAbout}>
@@ -21,16 +24,23 @@
 </Modal>
 
 <script>
-import { createEventDispatcher } from 'svelte';
+  import { getContext, createEventDispatcher } from "svelte";
   import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota";
 
   import About from "./About.svelte";
   let showAbout = false;
-    let activeTab = 'editor';
+  let activeTab = "editor";
+
+  const ship = getContext("ship");
 
   const dispatch = createEventDispatcher();
-$: dispatch( 'changeTab', activeTab );
+  $: dispatch("changeTab", activeTab);
 
+  const resetShip = () => {
+    if (!window.confirm("you really want to reset the ship?")) return;
+
+    ship.dispatch.resetShip();
+  };
 </script>
 
 <style>
@@ -73,4 +83,12 @@ $: dispatch( 'changeTab', activeTab );
     margin-right: 1em;
     padding-bottom: 0.125em !important;
   }
+  .menu {
+    display: flex;
+    align-items: baseline;
+  }
+  .menu .actions {
+    flex: 1;
+    text-align: right;
+  }
 </style>