Next tasks and close button on the bottom of task modal

frontend/src/TaskDisplay.svelte

@@ -55,10 +55,6 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
         list-style: initial;
         margin-left: 2em;
     }
-
-    div {
-        font-size: 1.25rem;
-    }
 </style>
 
 <div>

frontend/src/TaskPanel.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
     import type { TasksFile, TaskDescriptor } from "./tasks";
     import TaskDisplay from "./TaskDisplay.svelte";
+import GraphNode from "./GraphNode.svelte";
+import { taskStatuses } from "./task-status-cache";
 
     export let tasks: TasksFile;
     let selectedTask: TaskDescriptor | null = null
+    let nextTasks: TaskDescriptor[] = []
     export let selectedTaskId: string | null = null
 
     let heightClass: "closed" | "full" = "closed"
 
-
-
     let lastSelectedTaskId: string | null = null
 
     $: {
         if (selectedTaskId && lastSelectedTaskId != selectedTaskId) {
             heightClass = "full"
             selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null
+            nextTasks = tasks.tasks.filter(t => t.requires.includes(selectedTaskId!) && !t.hidden && t.type != "label")
         } else {
             heightClass = "closed";
         }
@@ -51,6 +53,8 @@
         box-sizing: border-box;
         z-index: 120;
         border-radius: 30px;
+        font-size: 1.25rem;
+        text-align: left;
     }
     @media only screen and (max-width: 600px) {
         .panel {
@@ -85,6 +89,10 @@
         content: "✖";
     }
     .panel.full .closeButton { display: inherit }
+    .splitter {
+        margin: 0px 8px;
+        color: #777777;
+    }
 </style>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -93,4 +101,19 @@
      on:click={() => location.hash = `#task/${selectedTask?.id}`}>
     <TaskDisplay task={selectedTask} />
     <button type=button class="closeButton" on:click|stopPropagation={close}></button>
+
+    <hr>
+
+    <a href="javascript:;" on:click={close}>Zavřít</a>
+    {#if nextTasks.length}
+        <span class="splitter">|</span> Pokračování:
+        {#each nextTasks as nextT}
+            {#if nextTasks[0] != nextT} <span class="splitter">|</span> {/if}
+            <a href="#task/{nextT.id}">{nextT.title}</a>
+
+            <!-- <svg style="display: inline-block;">
+                <GraphNode task={nextT} status={$taskStatuses.get(nextT.taskReference)} on:click={e => { location.hash = "task/" + nextT.id }}></GraphNode>
+            </svg> -->
+        {/each}
+    {/if}
 </div>