Add help

src/component/Icon.svelte

@@ -5,3 +5,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 {size} {size}">
   <use href="/icons.svg#{name}" />
 </svg>
+
+<style>
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

src/component/Modal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Button from "./Button.svelte";
+  import Icon from "./Icon.svelte";
+
+  interface Props {
+    title: string;
+    children: Snippet;
+  }
+
+  let { title, children } = $props<Props>();
+
+  let dialog = $state<HTMLDialogElement>();
+  export function show() {
+    dialog?.showModal();
+  }
+
+  export function hide() {
+    dialog?.close();
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->
+<dialog
+  class="modal"
+  bind:this={dialog}
+  onclick={evt => {
+    if (evt.currentTarget.tagName !== "DIALOG") return;
+
+    const rect = dialog?.getBoundingClientRect();
+    if (!rect) return;
+
+    const isInDialog =
+      rect.top <= evt.clientY &&
+      evt.clientY <= rect.top + rect.height &&
+      rect.left <= evt.clientX &&
+      evt.clientX <= rect.left + rect.width;
+    if (!isInDialog) dialog?.close();
+  }}
+>
+  <header class="header">
+    <span class="title">{title}</span>
+    <Button onclick={() => dialog?.close()}><Icon name="close" /></Button>
+  </header>
+  <div class="content">
+    {@render children()}
+  </div>
+</dialog>
+
+<style>
+  .modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    border-radius: 16px;
+    border: none;
+  }
+
+  ::backdrop {
+    background-color: #00000099;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    box-shadow: 0 1px 0 #00000022;
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+
+  .content {
+    padding: 16px;
+  }
+</style>

src/component/Outline.svelte

@@ -195,6 +195,10 @@
     opacity: 0.25;
   }
 
+  .outline :global(p) {
+    margin: 0;
+  }
+
   .outline :global(:where(ol, ul)) {
     list-style: revert;
     margin-inline-start: 1.5em;

src/routes/[guid]/+page.svelte

@@ -11,6 +11,7 @@
   import { download, open } from "~/lib/file";
   import Tooltip from "~/component/Tooltip.svelte";
   import Input from "~/component/Input.svelte";
+  import Modal from "~/component/Modal.svelte";
 
   let { data } = $props();
 
@@ -26,6 +27,7 @@
 
   let places = $derived(doc.places(focused ? collab.local.cursor?.head : undefined));
   let routes = $derived(doc.routes(focused ? collab.local.cursor?.head : undefined));
+  let help = $state<Modal>();
 </script>
 
 <svelte:head>
@@ -36,7 +38,11 @@
   <div class="data">
     <div class="toolbar">
       <div class="group">
-        <Button
+        <Button onclick={() => help?.show()}>
+          <Icon name="help" />
+          <span class="label">Help</span>
+        </Button>
+        <!-- <Button
           onclick={() => {
             const name = prompt("Enter a file name");
             if (!name) return;
@@ -50,14 +56,14 @@
         </Button>
         <Button
           onclick={async () => {
-            // const [file] = await open();
-            // const state = new Uint8Array(await file.arrayBuffer());
-            // doc = Doc.parse(state);
+            const [file] = await open();
+            const state = new Uint8Array(await file.arrayBuffer());
+            doc = Doc.parse(state);
           }}
         >
           <Icon name="open" />
           <span class="label">Open</span>
-        </Button>
+        </Button> -->
       </div>
       <div class="group">
         <Input placeholder="Untitled" bind:value={doc.title} />
@@ -89,6 +95,22 @@
   </div>
   <Map {places} {routes} />
 </div>
+<Modal bind:this={help} title="Help">
+  <p>travel is a rich text editor with extra capabilities for planning trips</p>
+  <p>
+    cmd+b is bold. cmd+i is italic. <code>-</code> at the beginning of a line starts a bulleted list
+    and <code>1.</code> at the beginning of the a starts a numbered list
+  </p>
+  <p>type <code>@</code> to search for places to plot on the map</p>
+  <p>
+    type <code>~</code> at the start of the line to create a route list, which draws lines between all
+    places inside it
+  </p>
+  <p>
+    cmd+d or this button <Icon name="focus" /> enters focus mode, which only shows locations in the same
+    block as your cursor.
+  </p>
+</Modal>
 
 <style>
   .wrapper {

src/style/style.css

@@ -10,3 +10,15 @@ body {
   font-family: "Overpass", sans-serif;
   --color-primary: #5c7cfa;
 }
+
+p {
+  margin-block: 1em;
+}
+
+p:first-child {
+  margin-block-start: 0;
+}
+
+p:last-child {
+  margin-block-end: 0;
+}