add quest log aesthetic.

svelte-ui/src/pages/FrontPage.svelte

@@ -2,10 +2,11 @@
   import EmptyList from "../components/EmptyList.svelte";
   import GoalEntry from "../components/GoalEntry.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
   import type { ProjectResult } from "../models/project";
   import { fpGoalStore } from "../stores/goal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
+  import { fpProjectStore } from "../stores/project";
+  import { fpTaskStore } from "../stores/tasks";
 
   let fakeProject: ProjectResult
   let sortedProjects: ProjectResult[]
@@ -85,6 +86,7 @@
     {/if}
   </div>
 </div>
+<RefreshSelection />
 
 <style>
   div.page {

svelte-ui/src/pages/GoalPage.svelte

@@ -3,6 +3,7 @@
   import GoalEntry from "../components/GoalEntry.svelte";
   import type { ModalData } from "../stores/modal";
   import goalStore from "../stores/goal";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
 
   const mdGoalAdd: ModalData = {name: "goal.add"};
 
@@ -21,6 +22,7 @@
   {/each}
   <Boi open={mdGoalAdd}>Add Goal</Boi>
 </div>
+<RefreshSelection />
 
 <style>
   div.page {

svelte-ui/src/pages/GroupPage.svelte

@@ -3,7 +3,8 @@
   import GroupEntry from "../components/GroupEntry.svelte";
   import type { ModalData } from "../stores/modal";
   import groupStore from "../stores/group";
-import TableOfContent from "../components/TableOfContent.svelte";
+  import TableOfContent from "../components/TableOfContent.svelte";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
 
   const mdGroupAdd: ModalData = {name: "group.add"};
 
@@ -21,6 +22,7 @@ import TableOfContent from "../components/TableOfContent.svelte";
   {/each}
   <Boi open={mdGroupAdd}>Add Group</Boi>
 </div>
+<RefreshSelection />
 
 <style>
   div.page {

svelte-ui/src/pages/LogsPage.svelte

@@ -5,6 +5,7 @@
   import { formatDate, formatTime, formatWeekdayDate } from "../utils/time";
   import Boi from "../components/Boi.svelte";
   import EmptyList from "../components/EmptyList.svelte";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
 
   let groupedLogs: {day: number, text: string, logs: LogResult[]}[] = [];
   let minTime = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
@@ -95,6 +96,7 @@
     <Boi disabled>Loading...</Boi>
   {/if}
 </div>
+<RefreshSelection />
 
 <style>
   div.page {

svelte-ui/src/pages/ProjectPage.svelte

@@ -2,6 +2,7 @@
   import Boi from "../components/Boi.svelte";
   import Checkbox from "../components/Checkbox.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
   import TableOfContent from "../components/TableOfContent.svelte";
   import type { ModalData } from "../stores/modal";
   import projectStore from "../stores/project";
@@ -37,6 +38,7 @@
   {/each}
   <Boi open={mdProjectAdd}>Add Project</Boi>
 </div>
+<RefreshSelection />
 
 <style>
   div.page {

svelte-ui/src/pages/QLPage.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Boi from "../components/Boi.svelte";
+  import QuestLog from "../components/QuestLog.svelte";
+  import RefreshSelection from "../components/RefreshSelection.svelte";
+  import type { ModalData } from "../stores/modal";
+  import projectStore from "../stores/project";
+
+  const mdProjectAdd: ModalData = {name: "project.add"};
+
+  $: {
+    if (($projectStore.stale || $projectStore.filter.active != null) && !$projectStore.loading) {
+      projectStore.load({});
+    }
+  }
+</script>
+
+<div class="page">
+  <QuestLog projects={$projectStore.projects} />
+  <Boi open={mdProjectAdd}>Add Project</Boi>
+</div>
+<RefreshSelection />
+
+
+<style>
+  div.page {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    width: 1600px;
+    margin-top: 0;
+    box-sizing: border-box;
+  }
+</style>