Merge branch 'exyi/task-url-routing' into master

frontend/src/App.svelte

@@ -17,6 +17,7 @@ import type { detach } from "svelte/internal";
   window.onhashchange = () => {
     hash = window.location.hash.substr(1);
   }
+  $: selectedTaskId = (/^task\/([^\/]*)/.exec(hash) || [null, null])[1]
 </script>
 
 <style>
@@ -34,10 +35,10 @@ import type { detach } from "svelte/internal";
     </TasksLoader>
   {:else}
     <TasksLoader promise={tasksPromise} let:data={t}>
-      <TaskPanel bind:this={taskPanel} />
+      <TaskPanel tasks={t} bind:this={taskPanel} {selectedTaskId} />
       <div style="height: 100%">
         <Graph tasks={t}
-               on:selectTask={e => taskPanel.select(e.detail)}
+               on:selectTask={e => location.hash=`#task/${e.detail.id}`}
                on:preSelectTask={e => taskPanel.preSelect(e.detail)}
                on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} />
       </div>

frontend/src/TaskPanel.svelte

@@ -4,8 +4,9 @@
     import type { TasksFile, TaskDescriptor } from "./task-loader";
 import TaskDisplay from "./TaskDisplay.svelte";
 
-    // export let tasks: TasksFile;
+    export let tasks: TasksFile;
     let selectedTask: TaskDescriptor | null = null
+    export let selectedTaskId: string | null = null
 
     let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
 
@@ -24,12 +25,17 @@ import TaskDisplay from "./TaskDisplay.svelte";
         }, 10);
     }
 
-    export function select(task: TaskDescriptor) {
-        selectedTask = task
+    $: {
+        if (selectedTaskId) {
             heightClass = "full"
+            selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null
+        } else {
+            heightClass = "collapsed"
+        }
     }
 
     function close() {
+        location.hash = ""
         heightClass = "closed"
         window.setTimeout(() => window.scrollTo({
             top: 0,
@@ -94,7 +100,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="panel {heightClass}"
-     on:click={() => selectedTask && select(selectedTask)}>
+     on:click={() => location.hash = `#task/${selectedTask?.id}`}>
     <TaskDisplay taskId={selectedTask?.id} />
     <button type=button class="closeButton" on:click|stopPropagation={close}></button>
 </div>